css background image move

Question

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 complex way to do that?

Answer 1

jQuery will allow you to do that easily.

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

Answer 2

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"});
}