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.
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:
Bootstrap-ramen är inte avgörande; Jag lade till det bara för att jag ville utnyttja sina stilar.
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:
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.animate.css
bibliotek med jQuery.animera-fördröjning
CSS-egenskapen.Nu, låt oss dyka in i animationerna!
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.
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.
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):
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:
matchMedia
metod.onLeave
funktion mer återanvändbar.