jQuery: animazioni a velocità diverse basate sullo scrolling della pagina

  • jQuery
  • Gabriele Romanato

In jQuery possiamo ottenere un valore diverso per ciascuna animazione basandoci sullo scrolling della pagina.

Assegniamo un valore diverso agli elementi che vogliamo animare:


<div class="box" data-speed="2"></div>
<div class="box" data-speed="9"></div>
<div class="box" data-speed="4"></div>

Quindi creiamo la nostra routine sullo scrolling della pagina:


$( window ).on( "scroll", function() {
    var $win = $( this );

    $( ".box" ).each(function() {
        var $box = $( this );
        var speed = $win.scrollTop() / parseInt( $box.data( "speed" ), 10 );
        // Usiamo questo valore per un'animazione, es. margin-top
    });
});

Volendo possiamo intercettare la posizione dell'elemento tramite offset verticale e applicare l'animazione quando l'elemento è nella viewport.

Torna su