jQuery - 여유 효과로 위아래로 스크롤 할 수 있습니까?

은 내가 아래로 페이지를 스크롤 할 때 요소를 애니메이션을 적용 할 :jQuery - 여유 효과로 위아래로 스크롤 할 수 있습니까?

$(document).ready(function(){ 
 
    $(window).scroll(function(){ 
 
    $('p').each(function(r){ 
 
     var scrolled = $(window).scrollTop(); 
 
     $(this).css('top', (scrolled * 2.5) + 'px'); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<p style="position:relative">This is a paragraph.</p> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>

그러나 나는 그 위에 여유 효과를 추가 할. CSS의 방법은 그래서 애니메이션 방식으로 시도 그렇게하지 않는 것 :

$(document).ready(function(){ 
 
    $(window).scroll(function(){ 
 
    $('p').each(function(r){ 
 
     var scrolled = $(window).scrollTop(); 
 
     $(this).animate({top: (scrolled * 10.5) + 'px'}, 
 
     600, 
 
     'easeOutExpo', 
 
     function() { 
 
     // 
 
     }) 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<p style="position:relative">This is a paragraph.</p> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<br/>

하지만 난 그냥 약간 페이지를 스크롤 할 때 무한 애니메이션 루프에있을 것으로 보인다.

아이디어가 있으십니까?

출처

2017-11-30 laukok

내가 관찰하고하는 것은 0.5 초 후, 애니메이션의 각 단계을 완료 할 수 있습니다 :

귀하의 다른 옵션은 더 이상 스크롤에 사용자를 확인하고 화면에서 해당 위치로 이동하는 것입니다 스크롤. 그래서'scrollTop'이 0, 1, 2, 3을 반환 할 때 .... 애니메이션은 매 단계마다 트리거됩니다. 10.5 배수이면 0, 10.5, 21, 31.5 ...입니다. 따라서 애니메이션은 30+ 단계와 같이 화면에서 'p'를 움직일 수 있습니다. 그리고 각 단계 애니메이션이 완료 되어야만 다음 애니메이션이 활성화 될 수 있기 때문에 시간이 걸릴 것입니다. – Twisty

10.5를 꺼내면 조금 더 쉽게 볼 수 있습니다. https://jsfiddle.net/Twisty/Lq73wkpm/1/ – Twisty

도움이되는 한 가지 방법은 모든 스크롤 동작에 애니메이션을 적용하지 않으므로 운영자 조건 인 % 인 mod를 사용하는 것입니다.

https://jsfiddle.net/Twisty/Lq73wkpm/2/

자바 스크립트

$(function() { 
    $(window).scroll(function() { 
    $('p').each(function(r) { 
     var scrolled = $(window).scrollTop(); 
     console.log("Scroll Top: " + scrolled); 
     if (scrolled % 10 == 0) { 
     console.log("Animate: " + scrolled); 
     $(this).animate({ 
      top: scrolled + 'px' 
      }, 
      600, 
      'easeOutExpo', 
      function() { 
      // 
      }); 
     } 
    }); 
    }); 
});

그것은 아직도 조금 어설픈입니다. jQuery scroll() detect when user stops scrolling

출처

2017-11-30 16:43:57 Twisty

조금 더 부드럽게 나타납니다. https://jsfiddle.net/Twisty/ Lq73wkpm/3 / – Twisty

jQuery - 여유 효과로 위아래로 스크롤 할 수 있습니까?

답변

관련 문제