Sfat rapid Scroll Animații Cu fullPage.js și Animate.css

Într-un tutorial anterior, v-am prezentat fullPage.js, un plugin popular jQuery pentru construirea de pagini full-screen. În acest sfat rapid, vă voi arăta cum să creați animații bazate pe scroll cu fullPage.js și animate.css.

Bibliotecile necesare

În scopul acestui exemplu, am creat o pagină demo. Dacă te uiți sub Setări , veți vedea că am inclus următoarele biblioteci în pix:

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

Cadrul Bootstrap nu este vital; Am adaugat-o doar pentru ca am vrut sa profit de stilurile sale.

Procesul

Pagina noastră cuprinde patru secțiuni; fiecare dintre ele umplând pagina (datorită fullPage). Utilizatorii vor sări la următoarea secțiune prin derularea sau navigarea prin legăturile de paginare din dreapta. De fiecare dată când se întâmplă acest lucru, vom declanșa unele animații, cum ar fi aducerea imaginilor în poziție, de exemplu.

Înainte de a afișa codul care declanșează animațiile, mai întâi să acoperiți pașii necesari:

• Trebuie să profităm de funcțiile de "callback" oferite de fullPage. Mai precis, în cazul nostru, vrem să animăm secțiunile a doua, a treia și a patra, așa că vom folosi la plecare suna inapoi. Dacă vrem să animăm prima secțiune, am fi putut folosi postsarcină suna inapoi. În același mod, pentru animarea diapozitivelor ar trebui să folosim afterSlideLoad și onSlideLeave funcții.
• Vom adăuga dinamic animațiile CSS furnizate de animate.css biblioteca folosind jQuery.
• De asemenea, vom anima secvențial elemente folosind animate întârziere Proprietatea CSS.

Acum, să ne aruncăm în animații!

Animație # 1

A doua secțiune a paginii include trei imagini și un buton. Iată structura sa:

 
             Un buton simplu      
 

Observați că am adăugat este animat- și este-animated__single clase către elementele pe care vrem să le animăm. În plus, rețineți că elementele cu este animat- clasa va împărți același efect de animație (de ex. fadeInUpBig).

Codul jQuery care declanșează animațiile pentru această secțiune arată astfel:

 var $ isAnimatedSecond = $ ('. second al .is-animat'), $ isAnimatedSecondSingle = $ ('. second .is-animated__single'); / * acest cod face parte din callback-ul onLeave * / if (index == 1 && nextIndex == 2) $ isAnimatedSecond.addClass ('animated fadeInUpBig'); $ isAnimatedSecond.eq (0) .css ('animație-întârziere', '.3s'); $ isAnimatedSecond.eq (1) .css ('animație-întârziere', '.6s'); $ isAnimatedSecond.eq (2) .css ('animație-întârziere', '.9s'); $ isAnimatedSecondSingle.addClass ('roll animat'). css ('animation-delay', '1.7s');  

În acest exemplu, când părăsim prima secțiune și ne mutăm la cea de-a doua, aplicăm două animații diferite (adică. fadeInUpBig și Rollin) la elementele țintă. În plus, folosim animație întârziere CSS pentru a specifica momentul când aceste animații ar trebui să înceapă.

Animație # 2

A treia secțiune conține două imagini și un buton. Mai jos puteți vedea codul HTML corespunzător:

 
          Un buton simplu      
 

Ca și în exemplul anterior, am adăugat este animat- și este-animated__single clase la elementele dorite.

Codul jQuery arată după cum urmează:

 var $ isAnimatedThird = $ ('' al treilea .is animat ''), $ isAnimatedThirdSingle = $ ('. treia .is-animated__single'); / * acest cod face parte din callbackul onLease * / if ((index == 1 || index == 2) && nextIndex == 3) $ isAnimatedThird.eq (0) .addClass ('animated fadeInRightBig'). ("animație-întârziere", ".3s"); $ isAnimatedThird.eq (1) .addClass ('animated-delay', '.6s'); $ isAnimatedThirdSingle.addClass ("bounceInDown animat"). css ('animation-delay', '1.2s');  

În această secțiune, folosim fadeInRightBig și fadeInLeftBig animații pentru a afișa secvențial imaginile. În plus, afișăm butonul utilizând bounceInDown animaţie.

Animație # 3

A patra secțiune constă din trei elemente: două paragrafe și un buton. Vedeți modul în care este structurat mai jos:

 
    
Un text aici
   
Un text aici
   Mulțumesc!      
 

Încă o dată, observați că am oferit elemente țintă este animat- și este-animated__single clase.

Apoi, aruncați o privire la codul jQuery asociat:

 var $ isAnimatedFourth = $ ('' al patrulea .is-animat ''), $ isAnimatedFourthSingle = $ (', al patrulea .is-animated__single'); / * acest cod face parte din apelul onLeave * / if ((index == 1 || index == 2 || index == 3) && nextIndex == 4) $ isAnimatedFourth.addClass ('animated zoomIn'). css ("animație-întârziere", ".6s"); $ isAnimatedFourthSinged.addClass ('animație-întârziere',' 1.2s ') $ isAnimatedFourthSingle.one (' webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend ', funcția () $ (this) .removeClass (' lightSpeedIn ') .addClass (' zoomOutDown '););  

Aici, ambele paragrafe apar în același timp folosind mareste animaţie. Dimpotrivă, butonul apare folosind butonul lightSpeedIn animaţie.

Mai mult, următorul cod ne ajută să detectăm când se termină o animație:

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

În exemplul nostru, afișăm butonul numai pentru câteva secunde și apoi profităm de codul menționat anterior pentru al ascunde.

Mai jos puteți vedea demo-ul codificat încorporat (deși demonstrația completă a paginii este mult mai eficientă):

Concluzie

În acest sfat rapid, am învățat cum putem combina bibliotecile fullpage.js și animate.css pentru a construi animații bazate pe scroll.

Dacă doriți să îmbunătățiți această demonstrație, iată două lucruri pe care ar trebui să le încercați:

• Activați animațiile numai pe ecrane mari. Pentru a realiza acest lucru, utilizați matchMedia metodă.
• Faceți codul în la plecare funcționează mai reutilizabilă.