Collegamento di animazioni/Trasformazioni CSS3 con evento di scorrimento

Question

Sto cercando un modo per collegare le transizioni CSS3 a un evento di scorrimento. Sto cercando funzionalità simili a http://nizoapp.com/, dove alcuni elementi si muovono quando si arriva a un certo punto di scorrimento sulla pagina. So che dovresti chiamare l'evento scroll con jQuery (usando offset e scroll), ma sono curioso di sapere se esiste un modo per usare CSS3 per la parte dell'animazione o se è necessario farlo in jQuery. Ad ogni modo, mi piacerebbe un po 'd'aiuto su come iniziare subito a far funzionare tutto questo. Grazie per l'aiuto.

Answer 1

Un buon punto di partenza potrebbe essere the jQuery Waypoints plugin. Semplifica l'esecuzione di una funzione ogni volta che scorri un elemento e puoi anche applicare le classi in base a ciò che è attualmente visualizzato. Potresti quindi usarli per attivare le animazioni CSS che stai cercando.

UPDATE - Ho appena trovato il plugin jQuery the Scrollorama. L'autore afferma che non è stato testato a fondo, ma è progettato per fare esattamente quello che stai cercando, e sicuramente sembra un buon punto di partenza.

Answer 2

Non è possibile collegare un CSS specifico a una posizione di scorrimento. Dovrai includere della colla javascript per ottenere quell'effetto. Il mio metodo preferito è quello di associare l'evento alla finestra onscroll e inserire lì il tuo codice di animazione.

Answer 3

Sto usando il metodo scrollTop().

Questo aggiungere o rimuovere una classe con i miei css proprietà animati

$(window).scroll(function (event) { 
    var y = $(this).scrollTop(); 

    if (y <= 300) { 
     $('#my-div').addClass('animate'); 
    } 
    else 
    { 
     $('#my-div').removeClass('animate');     
    } 
}); 

in html:

<div id="my-div"> 
    <p>Lorem ipsum dolor sit amet</p> 
</div> 

in css:

#my-div { 
    width:200px; 
    height:200px; 
    background-color:red; 
} 
#my-div.animate { 
    transition: rotate(30deg); 
}