Accentsconagua

Hurtig Tips Rul Animasjoner Med fullPage.js og Animate.css

Webdesign
Share

I en tidligere opplæring, introduserte jeg deg til fullPage.js, et populært jQuery-plugin for å bygge sider med fullskjerm. I dette raske tipset vil jeg vise deg hvordan du lager rullebaserte animasjoner med fullPage.js og animate.css.

Nødvendige biblioteker

I dette eksemplet oppretter jeg en demoverside. Hvis du ser under innstillinger fanen, ser du at jeg har tatt med følgende biblioteker til pennen:

  • fullPage.js
  • animate.css
  • jQuery
  • Bootstrap

Bootstrap-rammeverket er ikke avgjørende; Jeg la det bare fordi jeg ville dra nytte av stilene sine.

Prosessen

Vår side består av fire seksjoner; Hver fyller siden (takket være fullPage). Brukere vil hoppe til neste del ved å bla eller navigere via paginasjonslenkene til høyre. Hver gang det skjer, vil vi utløse noen animasjoner, for eksempel å bringe bildene til posisjon, for eksempel.

Før du viser koden som bryr animasjonene, la oss først dekke de nødvendige trinnene:

  • Vi må dra nytte av funksjonene "tilbakering" som fullPage gir. Nærmere bestemt, i vårt tilfelle ønsker vi å animere den andre, tredje og fjerde seksjonen, så vi skal bruke på ferie Ring tilbake. Hvis vi ønsket å animere den første delen, kunne vi ha brukt afterload Ring tilbake. På samme måte, for å animere lysbildene bør vi bruke afterSlideLoad og onSlideLeave funksjoner.
  • Vi vil dynamisk legge til CSS animasjoner levert av animate.css bibliotek ved hjelp av jQuery.
  • Vi vil også animere elementer i rekkefølge ved hjelp av animere-forsinkelse CSS eiendom.

Nå, la oss dykke inn i animasjonene!

Animasjon # 1

Den andre delen av siden inneholder tre bilder og en knapp. Her er dens struktur:

Legg merke til at vi har lagt til er-animerte og er-animated__single klasser til elementene som vi ønsker å animere. Vær også oppmerksom på at elementene med er-animerte klassen vil dele samme animasjonseffekt (f.eks. fadeInUpBig).

JQuery-koden som utløser animasjonene for denne delen ser slik ut:

 var $ isAnimatedSecond = $ ('. second.is-animated'), $ erAnimatedSecondSingle = $ ('. second.is-animated__single'); / * Denne koden er en del av onLeave tilbakeringingen * / if (index == 1 && nextIndex == 2) $ isAnimatedSecond.addClass ('animated fadeInUpBig'); $ erAnimatedSecond.eq (0) .css ('animasjon-forsinkelse', '.3s'); $ isAnimatedSecond.eq (1) .css ('animasjon-forsinkelse', '.6s'); $ erAnimatedSecond.eq (2) .css ('animasjon-forsinkelse', '.9s'); $ isAnimatedSecondSingle.addClass ('animert rollIn'). css ('animasjon-forsinkelse', '1.7s');

I dette eksemplet, når vi forlater den første delen og flytter til den andre, bruker vi to forskjellige animasjoner (dvs.. fadeInUpBig og Rollin) til målelementene. I tillegg bruker vi animasjon-forsinkelse CSS-egenskapen for å spesifisere når disse animasjonene skal starte.

Animasjon # 2

Den tredje delen inneholder to bilder og en knapp. Nedenfor kan du se den tilsvarende HTML-koden:

Som med forrige eksempel, har vi lagt til er-animerte og er-animated__single klasser til de ønskede elementene.

JQuery-koden ser ut som følgende:

 var $ isAnimatedThird = $ ('. tredje .is-animert'), $ erAnimatedThirdSingle = $ ('. tredje .is-animated__single'); / * Denne koden er en del av onLeave callback * / if ((indeks == 1 || index == 2) && nextIndex == 3) $ isAnimatedThird.eq (0) .addClass ('animert fadeInRightBig'). ('animasjonsforsinkelse', '.3s'); $ isAnimatedThird.eq (1) .addClass ('animert fadeInLeftBig'). css ('animasjon-forsinkelse', '.6s'); $ isAnimatedThirdSingle.addClass ('animert bounceInDown'). css ('animasjon-forsinkelse', '1.2s');

I denne delen bruker vi fadeInRightBig og fadeInLeftBig animasjoner for å vise bildene i rekkefølge. Videre viser vi knappen ved hjelp av bounceInDown animasjon.

Animasjon # 3

Den fjerde delen består av tre elementer: to avsnitt og en knapp. Se hvordan det er strukturert nedenfor:

 
    
Noen tekst her
   
Noen tekst her

Igjen, merk at vi har gitt målelementene er-animerte og er-animated__single klasser.

Ta en titt på den tilknyttede jQuery-koden:

 var $ isAnimatedFourth = $ ('. fourth .is-animated'), $ erAnimatedFourthSingle = $ ('. fourth .is-animated__single'); / * Denne koden er en del av onLeave callback * / if ((index == 1 || indeks == 2 || index == 3) && nextIndex == 4) $ isAnimatedFourth.addClass ('animert zoomIn'). css ('animasjonsforsinkelse', '.6s'); $ isAnimatedFourthSingle.addClass ('animated lightSpeedIn'). css ('animasjon-forsinkelse', '1.2s') $ erAnimatedFourthSingle.one ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animerende animasjonend', funksjon () $ (dette) .removeClass ('lightSpeedIn ') .addClass (' zoomOutDown '););

Her vises begge avsnitt samtidig med zoom inn animasjon. Tvert imot vises knappen ved hjelp av lightSpeedIn animasjon.

Videre hjelper den følgende koden oss til å oppdage når en animasjon slutter:

 $ ('# yourElement'). En ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animerende animasjonend', doSomething);

I vårt eksempel viser vi knappen bare i noen sekunder, og deretter benytter vi den forutnevnte koden for å skjule den.

Nedenfor kan du se den innebygde Codepen-demoen (selv om full-demo-demoen er langt mer effektiv):

Konklusjon

I dette raske tipset lærte vi hvordan vi kan kombinere fullpage.js og animate.css biblioteker for å bygge rullebaserte animasjoner.

Hvis du vil forbedre denne demoen, er det to ting du kanskje vil prøve:

  • Aktiver animasjonene bare på store skjermer. For å oppnå dette, bruk matchMedia metode.
  • Lag koden i på ferie funksjon mer gjenbrukbar.
Webdesign
×