Suggerimento rapido Scorri le animazioni con fullPage.js e Animate.css

In un tutorial precedente, ti ho presentato a fullPage.js, un popolare plugin jQuery per la creazione di pagine a schermo intero. In questo suggerimento rapido, ti mostrerò come creare animazioni basate su scroll con fullPage.js e animate.css.

Biblioteche richieste

Per gli scopi di questo esempio, ho impostato una pagina demo. Se guardi sotto il impostazioni scheda, vedrai che ho incluso le seguenti librerie sulla penna:

• fullPage.js
• animate.css
• jQuery
• bootstrap

Il framework Bootstrap non è vitale; L'ho aggiunto solo perché volevo sfruttare i suoi stili.

Il processo

La nostra pagina comprende quattro sezioni; ognuno riempie la pagina (grazie a fullPage). Gli utenti passeranno alla sezione successiva scorrendo, o navigando tramite i collegamenti di paginazione sulla destra. Ogni volta che ciò accade, attiveremo alcune animazioni, come ad esempio il posizionamento delle immagini.

Prima di mostrare il codice che attiva le animazioni, esaminiamo innanzitutto i passaggi richiesti:

• Dobbiamo sfruttare le funzioni di "callback" fornite da fullPage. Più specificamente, nel nostro caso, vogliamo animare la seconda, la terza e la quarta sezione, quindi useremo il in ferie richiama. Se volessimo animare la prima sezione, avremmo potuto usare il postcarico richiama. Allo stesso modo, per animare le diapositive dovremmo usare il afterSlideLoad e onSlideLeave funzioni.
• Aggiungeremo dinamicamente le animazioni CSS fornite da animate.css libreria usando jQuery.
• Animeremo anche gli elementi in sequenza usando il animare ritardo Proprietà CSS.

Ora, tuffiamoci nelle animazioni!

Animazione # 1

La seconda sezione della pagina include tre immagini e un pulsante. Ecco la sua struttura:

 
             Un semplice pulsante      
 

Si noti che abbiamo aggiunto il è animato e è-animated__single classi agli elementi che vogliamo animare. Inoltre, tieni presente che gli elementi con il è animato la classe condividerà lo stesso effetto di animazione (ad es. fadeInUpBig).

Il codice jQuery che attiva le animazioni per questa sezione ha il seguente aspetto:

 var $ isAnimatedSecond = $ ('. secondo .is-animated'), $ isAnimatedSecondSingle = $ ('. secondo .is-animated__single'); / * questo codice fa parte del callback onLeave * / if (index == 1 && nextIndex == 2) $ isAnimatedSecond.addClass ('animated fadeInUpBig'); $ isAnimatedSecond.eq (0) .css ('animation-delay', '.3s'); $ isAnimatedSecond.eq (1) .css ('animation-delay', '.6s'); $ isAnimatedSecond.eq (2) .css ('animation-delay', '.9s'); $ isAnimatedSecondSingle.addClass ('animated rollIn'). css ('animation-delay', '1.7s');  

In questo esempio, quando lasciamo la prima sezione e passiamo alla seconda, applichiamo due diverse animazioni (ad es. fadeInUpBig e rollin) agli elementi target. Inoltre, usiamo il animazione ritardo Proprietà CSS per specificare quando devono iniziare quelle animazioni.

Animazione # 2

La terza sezione contiene due immagini e un pulsante. Qui sotto puoi vedere il codice HTML corrispondente:

 
          Un semplice pulsante      
 

Come con l'esempio precedente, abbiamo aggiunto il è animato e è-animated__single classi agli elementi desiderati.

Il codice jQuery è simile al seguente:

 var $ isAnimatedThird = $ ('. terzo .is-animated'), $ isAnimatedThirdSingle = $ ('. terzo .is-animated__single'); / * questo codice fa parte del callback onLeave * / if ((index == 1 || index == 2) && nextIndex == 3) $ isAnimatedThird.eq (0) .addClass ('animated fadeInRightBig'). css ('animation-delay', '.3s'); $ isAnimatedThird.eq (1) .addClass ('animated fadeInLeftBig'). css ('animation-delay', '.6s'); $ isAnimatedThirdSingle.addClass ('animated bounceInDown'). css ('animation-delay', '1.2s');  

In questa sezione, usiamo il fadeInRightBig e fadeInLeftBig animazioni per mostrare in sequenza le immagini. Inoltre, mostriamo il pulsante usando il bounceInDown animazione.

Animazione # 3

La quarta sezione è composta da tre elementi: due paragrafi e un pulsante. Guarda come è strutturato qui sotto:

 
    
Qualche testo qui
   
Qualche testo qui
   Grazie!      
 

Ancora una volta, nota che abbiamo fornito gli elementi di destinazione è animato e è-animated__single classi.

Successivamente, dai un'occhiata al codice jQuery associato:

 var $ isAnimatedFourth = $ ('. quarto .is-animated'), $ isAnimatedFourthSingle = $ ('. quarto .is-animated__single'); / * questo codice fa parte del callback onLeave * / if ((indice == 1 || indice == 2 || indice == 3) && nextIndex == 4) $ isAnimatedFourth.addClass ('zoomin animato'). css ('animation-delay', '.6s'); $ isAnimatedFourthSingle.addClass ('animated lightSpeedIn'). css ('animation-delay', '1.2s') $ isAnimatedFourthSingle.one ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () $ (this) .removeClass ('lightSpeedIn ') .addClass (' zoomOutDown '););  

Qui, entrambi i paragrafi appaiono allo stesso tempo usando il ingrandire animazione. Al contrario, il pulsante appare usando il lightSpeedIn animazione.

Inoltre, il codice seguente ci aiuta a rilevare quando termina un'animazione:

 $ ('# yourElement'). uno ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); 

Nel nostro esempio, mostriamo il pulsante solo per pochi secondi e quindi sfruttiamo il codice sopra menzionato per nasconderlo.

Qui sotto puoi vedere la demo di Codepen incorporata (anche se la demo della pagina intera è molto più efficace):

Conclusione

In questo suggerimento, abbiamo imparato come combinare le librerie fullpage.js e animate.css per creare animazioni basate su scroll.

Se vuoi migliorare questa demo, ecco due cose che potresti provare:

• Abilita le animazioni solo su schermi di grandi dimensioni. Per ottenere ciò, utilizzare il Matchmedia metodo.
• Crea il codice all'interno di in ferie funzione più riutilizzabile.