CODEWITHSUNDEEP
javascriptcss
zuups
zuups

Reputation: 1140

css background image move

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?

Upvotes: 3

Views: 2779

Answers (4)

Russell Dias
Russell Dias

Reputation: 73312

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.

Upvotes: 1

zuups
zuups

Reputation: 1140

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

Upvotes: 2

ghoppe
ghoppe

Reputation: 21794

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

Upvotes: 2

Rap
Rap

Reputation: 7292

jQuery will allow you to do that easily.

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

Upvotes: 2

Related Questions