Snabbtips Rulla animeringar med fullPage.js och Animate.css

I en tidigare handledning introducerade jag dig till fullPage.js, ett populärt jQuery-plugin för att bygga sidor på helskärm. I det här snabba tipset visar jag hur du skapar rullningsbaserade animeringar med fullPage.js och animate.css.

Obligatoriska bibliotek

I det här exemplet ska jag skapa en demosida. Om du tittar under inställningar fliken ser du att jag inkluderade följande bibliotek i pennan:

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

Bootstrap-ramen är inte avgörande; Jag lade till det bara för att jag ville utnyttja sina stilar.

Processen

Vår sida består av fyra avsnitt; var och en fyller sidan (tack vare fullsidan). Användare kommer att hoppa till nästa avsnitt genom att bläddra eller navigera via paginationslänkarna till höger. Varje gång det händer utlöser vi några animeringar, till exempel att ta bilderna till position.

Innan du visar koden som bränder animationerna, låt oss först täcka de nödvändiga stegen:

  • Vi måste utnyttja de "återuppringningsfunktioner" som fullPage tillhandahåller. Mer specifikt, i vårt fall vill vi animera den andra, tredje och fjärde sektionen, så vi använder onLeave ring tillbaka. Om vi ​​ville animera den första sektionen kunde vi ha använt afterload ring tillbaka. På samma sätt, för att animera bilderna borde vi använda afterSlideLoad och onSlideLeave funktioner.
  • Vi lägger dynamiskt till CSS-animeringar som tillhandahålls av animate.css bibliotek med jQuery.
  • Vi kommer också att animera element i följd med hjälp av animera-fördröjning CSS-egenskapen.

Nu, låt oss dyka in i animationerna!

Animation # 1

Den andra delen av sidan innehåller tre bilder och en knapp. Här är dess struktur:

 

Observera att vi har lagt till är-animerade och är-animated__single klasser till de element som vi vill animera. Tänk dessutom på att elementen med är-animerade klassen kommer att dela samma animeringseffekt (t.ex.. fadeInUpBig).

JQuery-koden som utlöser animationerna för det här avsnittet ser ut så här:

 var $ isAnimatedSecond = $ ('. second .is-animated'), $ isAnimatedSecondSingle = $ ('. second .is-animated__single'); / * den här koden är en del av onLeave callback * / if (index == 1 && nextIndex == 2) $ isAnimatedSecond.addClass ('animated fadeInUpBig'); $ isAnimatedSecond.eq (0) .css ('animationsfördröjning', '.3s'); $ isAnimatedSecond.eq (1) .css ('animationsfördröjning', '.6s'); $ isAnimatedSecond.eq (2) .css ('animationsfördröjning', '.9s'); $ isAnimatedSecondSingle.addClass ('animated rollIn'). css ('animation-delay', '1.7s');  

I det här exemplet, när vi lämnar den första sektionen och flyttar till den andra, applicerar vi två olika animeringar (dvs.. fadeInUpBig och Rollin) till målelementen. Dessutom använder vi animering-fördröjning CSS-egenskapen för att ange när dessa animeringar ska startas.

Animation # 2

Den tredje sektionen innehåller två bilder och en knapp. Nedan kan du se motsvarande HTML-kod:

 

Precis som i föregående exempel har vi lagt till är-animerade och är-animated__single klasser till de önskade elementen.

JQuery-koden ser ut som följande:

 var $ isAnimatedThird = $ ('. third .is-animated'), $ isAnimatedThirdSingle = $ ('. third .is-animated__single'); / * denna kod är en del av onLeave callback * / if ((index == 1 || index == 2) && nextIndex == 3) $ isAnimatedThird.eq (0) .addClass ('animerad fadeInRightBig'). ('animationsfördröjning', '.3s'); $ isAnimatedThird.eq (1) .addClass ('animerad fadeInLeftBig'). css ('animationsfördröjning', '.6s'); $ isAnimatedThirdSingle.addClass ('animated bounceInDown'). css ('animation-delay', '1.2s');  

I det här avsnittet använder vi fadeInRightBig och fadeInLeftBig animeringar för att sekventiellt visa bilderna. Dessutom visar vi knappen med hjälp av bounceInDown animering.

Animation # 3

Den fjärde sektionen består av tre element: två stycken och en knapp. Se hur det är strukturerat nedan:

 

Några text här

Några text här

Återigen märker vi att vi har givit målelementen är-animerade och är-animated__single klasser.

Ta en titt på den associerade jQuery-koden:

 var $ isAnimatedFourth = $ ('. fourth .is-animated'), $ isAnimatedFourthSingle = $ ('. fourth .is-animated__single'); / * den här koden är en del av onLeave callback * / if ((index == 1 || index == 2 || index == 3) && nextIndex == 4) $ isAnimatedFourth.addClass ('animated zoomIn'). css ('animationsfördröjning', '.6s'); $ isAnimatedFourthSingle.addClass ('animated lightSpeedIn'). css ('animationsfördröjning', '1.2s') $ isAnimatedFourthSingle.one ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', funktion () $ (this) .removeClass ('lightSpeedIn ') .addClass (' zoomOutDown '););  

Här visas båda styckena samtidigt som du använder zooma in animering. Tvärtom visas knappen med hjälp av lightSpeedIn animering.

Dessutom hjälper följande kod oss ​​att upptäcka när en animation slutar:

 $ ('# yourElement'). En ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', gör något); 

I vårt exempel visar vi knappen bara några sekunder och sedan utnyttjar vi den ovan nämnda koden för att dölja den.

Nedan ser du den inbäddade Codepen-demo (även om full-demo-demo är mycket effektivare):

Slutsats

I det här snabba tipset lärde vi oss hur vi kan kombinera biblioteken fullpage.js och animate.css för att skapa rullningsbaserade animeringar.

Om du vill förbättra den här demoen är det här två saker du kanske vill försöka:

  • Aktivera animationerna endast på stora skärmar. För att uppnå detta, använd matchMedia metod.
  • Gör koden inom onLeave funktion mer återanvändbar.