jQuery - animieren auf Scrollen nach oben und unten mit Easing-Effekt?

Question

Ich mag ein Element animieren, wenn ich nach unten scrollen und auf der Seite:

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

Aber ich will die Lockerung Wirkung auf ihn hinzuzufügen. CSS-Methode scheint nicht das zu tun, so habe ich versucht, mit belebter Methode:

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

Aber es scheint, auf der unendlichen belebte Schleife zu sein, wenn ich die Seite etwas nur blättern.

Irgendwelche Ideen?

Answer 1

Eine Möglichkeit zu helfen wäre, mod, %, Operator Bedingung, so dass Sie nicht jede Scroll-Bewegung animieren.

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() { 
      // 
      }); 
     } 
    }); 
    }); 
}); 

Es ist immer noch ein wenig klobig.

Die andere Option ist für den Benutzer nicht mehr blättern, um zu überprüfen und auf dem Bildschirm zu dieser Position springen: jQuery scroll() detect when user stops scrolling