перемещение фонового изображения css

Question

У меня есть изображение в заголовке сайта в качестве фона. Теперь, когда страница загружена, я бы хотел переместить ее медленно слева направо (около 100 пикселей) и затем остановить Есть ли не слишком сложный способ сделать это?

Answer 1

Вы должны убедиться, что он анимируется только при первой загрузке страницы, а не по внутренним ссылкам сайта. Мне нравится использовать jquery для такого рода вещей.

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

Answer 2

Спасибо, Рэп и ghoppe!Это был полезный намек.Я на самом деле хотел переместить фоновое изображение, а не его контейнер, поэтому я сначала установил его положение в css:

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

, а затем с помощью jQuery:

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

Answer 3

jQuery позволит вам сделать это легко.

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

Answer 4

Ребята на LaunchList имеют движущийся фон. Просматривая их CSS, это то, что я нашел. Может быть, это поможет.

#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;
}

Обратите внимание, что это будет отображаться только для веб-браузеров.