jQuery의 애니메이션 헤더

Question

헤더를 애니메이션화하는 멋진 jQuery 스크립트가 있습니다. http://www.devirtuoso.com/2009/07/how-to-build-an-animated-header-in-jquery. 그러나 조금 변경하고 싶지만 불행히도 내 스크립팅 기술은 제한적입니다.

내가하고 싶은 일은 : 애니메이션이 이미지의 끝에 도달하면 다시 위로 스크롤하고 튜토리얼 에서처럼 다시 시작하지 않기를 원합니다. 기본적으로 이미지는 계속 위아래로 움직입니다.

누구나 스크립트 위주로 보일 것입니다.

감사

Answer 1

이에 scrollBg() 함수를 변경해보십시오 :

여기

function scrollBg(){ 

//Go to next pixel row. 
current -= step; 

//If at the end of the image, then go to the top. 
if (current == restartPosition){ 
    step = -1; 
} else if (current == 0) { 
    step = 1; 
} 

//Set the CSS of the header. 
$('#header').css("background-position","0 "+current+"px"); 
} 

은 아주 기본적인 작업 예입니다 (단지 데모 용 - 위의 코드 사용) : http://jsfiddle.net/lukemartin/u2XJ8/

모두 싸이클이 끝날 때 단계 값을 전환합니다.