I have image in website's header as background. Now, when page is loaded, I'd like to move it slowly from left to right (about 100 pixels) and then stop. Is there any not too plex way to do that?

I have image in website's header as background. Now, when page is loaded, I'd like to move it slowly from left to right (about 100 pixels) and then stop. Is there any not too plex way to do that?

• javascript
• css

• 2 All I can say is that this operation will be damn slow on a whole lot of today's browsers. Your users will get frustrated whenever they open your website. Perhaps you can achieve the effect you want with an animated gif. That may get you faster. – ypnos Commented Jun 16, 2010 at 16:45

4 Answers 4

jQuery will allow you to do that easily.

$("#theImage").animate({
    left: "+=100px", 
}, "slow");

You should check to make sure it only animates on the first page load, not from internal site links. I like to use jquery for this sort of thing.

// animate on first load only
if ( document.referrer == null || document.referrer.indexOf(window.location.hostname) < 0 ) {
$("#logo").animate({ 
    marginLeft: "100px",
    easing: 'swing'
}, 3000 );  // adjust your duration here (milliseconds)
} else { 
    // internal site link set the proper position
    $("#logo").css({ marginLeft: "100px"});
}

Thanks, Rap and ghoppe! That was a helpful hint. I actually wanted to move the background image, not its container so I first set its position in css:

.top-back-image { background-position: -100px 0px; }

and then with jQuery:

$(".top-back-image").animate({ 
  backgroundPosition: "0px 0px",
  easing: 'swing'
}, 3000 );

The guys over at LaunchList have a moving background. Looking through their CSS, this is what I found. Maybe it will be of some help.

#clouds {
    width: 100%;
    height: 650px;
    top: 200px;
    display: block;
    position: fixed;
    background: url(../art/cloud.png) 500px 0 repeat-x;
    -webkit-animation-name: move;
    -webkit-animation-duration: 400s;
    -webkit-animation-iteration-count: infinite;
    z-index: 2;
}

Note that this will only show for webkit browsers.