스크롤을 통해 애니메이트하는 방법은 무엇입니까?

-1

jQuery를 사용하여 애니메이션을 만들려고합니다. .animate 사용하기 당신은 시간의 여유가있을 수 있지만 픽셀의 지속 기간을 스크롤하고 싶었습니다. 일부 웹 사이트에서 스크롤 한 특정 양의 픽셀에 대해 효과가 발생하는 것을 보았습니다. - 설명을 위해 jQuery animate는 다음과 같습니다. .animate (속성 [, duration] [, easing] [, 완료]) 지속 시간은 초입니다. 동일한 효과를 얻는 방법을 알고 싶지만 픽셀 지속 시간을 스크롤하십시오. 예를 들어, 50 ~ 100 픽셀 스크롤링되었지만 40px를 누르면 페이드가 시작되지 않습니다. 당신이 아래로 스크롤하면 이 그것을 가지고 http://squarespace.com/home/overview/ 다음스크롤을 통해 애니메이트하는 방법은 무엇입니까?

출처

2015-02-04 Lori Miller

좀 더 자세히 설명해 주시겠습니까? 이 효과를 사용하는 사이트의 몇 가지 예가 큰 도움이 될 것입니다. – ClarkeyBoy

scrollspy js가 필요합니다. 이것을보십시오 http://davidwalsh.name/js/scrollspy –

가 당신을 위해 무엇을 찾고있는 것입니다 - 나는 시작하는 ... 추측이 바이올린을 시도해보십시오

http://jsfiddle.net/pu1yLe4u/4/

행운

window.addEventListener("scroll", function() { 
    console.log(window.pageYOffset); 
    if (window.pageYOffset > 20) { 
     $('.moveme').css('transform', 'rotate(180deg)'); 

    } else { 
     $('.moveme').css('transform', 'rotate(360deg)'); 
    } 
}, false);

에게

출처

2015-02-04 20:40:29 spooky

이것은 단지 20 픽셀이 스크롤 된 후에 애니메이션을 시작하는 것입니다. 애니메이션이 50 픽셀 이상 천천히 발생하도록하고 싶습니다. 감사합니다 –

@ LoriMiller 각 픽셀의 증가와 함께 점진적으로 회전 각도를 변경하는 코드를 추가 할 수 있습니다 ...이 코드는 개선 될 수 있지만 어떻게 할 지에 대한 아이디어를 줄 것입니다 ... http://jsfiddle.net/pu1yLe4u/12/ – spooky

효과가 있었나요? – spooky

스크롤을 통해 애니메이트하는 방법은 무엇입니까?

답변

관련 문제