CODEWITHSUNDEEP
jqueryhtmlcss
Maarten
Maarten

Reputation: 229

Moving fullscreen background image

Have been looking for two days now but after all the Googling still no idea how to achieve what I want.

Hope anyone can help me.

I want my background image to move like this: http://www.theophile-patachou.com/nl/

Any suggestions? Dug through stackoverflow like I was searching gold but no result...

Guess the way to go is css transform?

I tried to use these examples to build it but the outcome was really not as desired http://www.sitepoint.com/css3-transform-background-image/

Upvotes: 0

Views: 1293

Answers (2)

Sam Mckay
Sam Mckay

Reputation: 71

You could also do this with css @keyframes

@keyframes background-animation {
    0%   { background-size:100% auto; }
    50% { background-size:150% auto; }
    100% { background-size:100% auto; }
}

#divwiththebackground {
  animation:background-animation 10s infinite;
}

This would animate the background from 100% the width of the div to 150% the width of the div and back over 10 seconds (this can be made shorter/longer and the animations could be changed, i.e. moving the background as well with background-position)

Upvotes: 1

Jayababu
Jayababu

Reputation: 1621

You can achieve that zooming affect using jquery animate function (http://api.jquery.com/animate/).

$('img').animate({width:'+=300',height:'+=300'},16000);
$('img').animate({width:'-=300',height:'-=300'},16000);

if you need use setInterval and call repeatedly.

setInterval(function(){
    $('img').animate({width:'+=300',height:'+=300'},16000);
    $('img').animate({width:'-=300',height:'-=300'},16000);
},32100);

Upvotes: 0

Related Questions