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/>

しかし、私はそれの上に緩和効果を追加したいです。

$(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/>

しかし、私が少しだけページをスクロールすると、無限アニメイトループ上にあるように思える：CSS方式は、私はアニメーションの方法で試みたことをやっていないようです。

アイデア？

出典

2017-11-30 laukok

私は何を見ていますが半秒後に、アニメーションは、各ステップのために完了することです：

あなたの他のオプションは、もはやスクロールへのユーザーのためにチェックして、画面にその場所にジャンプすることですスクロール。だから、 '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

1つの方法は、すべてのスクロール動作をアニメートしないように、mod、%のオペレータ条件を使用することです。

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

はJavaScript

$(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 - イージングエフェクトを使用して上下にスクロールしてアニメーションしますか？

答えて

関連する問題