CSS 배경 이미지 이동

Question

배경으로 웹 사이트의 헤더에 이미지가 있습니다. 이제 페이지가로드 될 때 왼쪽에서 오른쪽 (약 100 픽셀)으로 천천히 이동 한 다음 중지하고 싶습니다. 그렇게 하기엔 너무 복잡한 방법이 있습니까?

Answer 1

jQuery를 사용하면 쉽게 할 수 있습니다.

Answer 2

내부 사이트 링크가 아닌 첫 페이지로드시에만 애니메이션이 적용되는지 확인해야합니다. 나는 이런 종류의 일에 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 3

감사합니다. 랩과 ghoppe! 도움이되는 힌트였습니다. jQuery로

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

다음 : LaunchList에서

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

Answer 4

녀석을 통해이 움직이는 배경이 실제로 배경 이미지를 이동하고 싶어하지 그 용기는 그래서 내가 먼저 CSS에서의 위치를 ​​설정합니다. 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; 
} 

이것은 웹킷 브라우저에만 표시됩니다.