Accentsconagua

Schneller Tipp Scrollen Sie Animationen mit fullPage.js und Animate.css

Web-Design
Share

In einem früheren Tutorial habe ich Ihnen fullPage.js vorgestellt, ein beliebtes jQuery-Plugin zum Erstellen von Vollbildseiten. In diesem kurzen Tipp zeige ich Ihnen, wie Sie mit fullPage.js und animate.css scroll-basierte Animationen erstellen.

Benötigte Bibliotheken

Für dieses Beispiel habe ich eine Demoseite eingerichtet. Wenn du unter der die Einstellungen Auf der Registerkarte werden folgende Bibliotheken in den Stift aufgenommen:

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

Das Bootstrap-Framework ist nicht wichtig. Ich habe es nur hinzugefügt, weil ich seine Stile nutzen wollte.

Der Prozess

Unsere Seite besteht aus vier Abschnitten; Jeder füllt die Seite (dank fullPage). Die Benutzer springen durch Scrollen zum nächsten Abschnitt oder navigieren über die Paginierungslinks auf der rechten Seite. Jedes Mal, wenn das passiert, lösen wir einige Animationen aus, z. B. die Bilder in Position bringen.

Bevor Sie den Code anzeigen, mit dem die Animationen ausgelöst werden, gehen wir zunächst auf die erforderlichen Schritte ein:

  • Wir müssen die Callback-Funktionen nutzen, die fullPage bietet. In unserem Fall wollen wir insbesondere den zweiten, dritten und vierten Abschnitt animieren, also verwenden wir den onLeave Ruf zurück. Wenn wir den ersten Abschnitt animieren wollten, hätten wir den verwenden können afterLoad Ruf zurück. In gleicher Weise sollten wir für die Animation der Folien die afterSlideLoad und onSlideLeave Funktionen.
  • Wir werden dynamisch CSS-Animationen hinzufügen, die von bereitgestellt werden animate.css Bibliothek mit jQuery.
  • Wir werden auch Elemente nacheinander mit dem animieren Animationsverzögerung CSS-Eigenschaft.

Lassen Sie uns nun in die Animationen eintauchen!

Animation # 1

Der zweite Abschnitt der Seite enthält drei Bilder und eine Schaltfläche. Hier ist seine Struktur:

Beachten Sie, dass wir das hinzugefügt haben ist animiert und is-animated__single Klassen zu den Elementen, die wir animieren möchten. Beachten Sie zusätzlich, dass die Elemente mit der ist animiert Klasse hat den gleichen Animationseffekt (z. fadeInUpBig).

Der jQuery-Code, der die Animationen für diesen Abschnitt auslöst, sieht folgendermaßen aus:

 var $ isAnimatedSecond = $ ('. Sekunde .is-animated'), $ isAnimatedSecondSingle = $ ('. Sekunde .is-animated__single'); / * Dieser Code ist Teil des onLeave-Callbacks. * / 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 ('animiertes rollIn'). css ('animation-delay', '1.7s');

Wenn wir in diesem Beispiel den ersten Abschnitt verlassen und zum zweiten wechseln, werden zwei verschiedene Animationen (d. H. fadeInUpBig und rollIn) zu den Zielelementen. Darüber hinaus verwenden wir die Animationsverzögerung CSS-Eigenschaft, um anzugeben, wann diese Animationen beginnen sollen.

Animation # 2

Der dritte Abschnitt enthält zwei Bilder und eine Schaltfläche. Unten sehen Sie den entsprechenden HTML-Code:

Wie im vorherigen Beispiel haben wir das hinzugefügt ist animiert und is-animated__single Klassen zu den gewünschten Elementen.

Der jQuery-Code sieht folgendermaßen aus:

 var $ isAnimatedThird = $ ('. dritte .is-animated'), $ isAnimatedThirdSingle = $ ('. dritte .is-animated__single'); / * dieser Code ist Teil des onLeave-Callbacks * / if ((index == 1 || index == 2) && nextIndex == 3) $ isAnimatedThird.eq (0) .addClass ('animated fadeInRightBig'). css ('Animationsverzögerung', '.3s'); $ isAnimatedThird.eq (1) .addClass ('animated fadeInLeftBig'). css ('animation-delay', '.6s'); $ isAnimatedThirdSingle.addClass ('animated bounceInDown'). css ('animation-delay', '1.2s');

In diesem Abschnitt verwenden wir die fadeInRightBig und fadeInLeftBig Animationen, um die Bilder nacheinander anzuzeigen. Außerdem zeigen wir den Button mit der bounceInDown Animation.

Animation # 3

Der vierte Abschnitt besteht aus drei Elementen: zwei Absätzen und einer Schaltfläche. Sehen Sie unten, wie es aufgebaut ist:

 
    
Text hier
   
Text hier

Beachten Sie erneut, dass wir den Zielelementen das gegeben haben ist animiert und is-animated__single Klassen.

Schauen Sie sich als Nächstes den zugehörigen jQuery-Code an:

 var $ isAnimatedFourth = $ ('. vierter .is-animated'), $ isAnimatedFourthSingle = $ ('. vierter .is-animated__single'); / * Dieser Code ist Teil des onLeave-Callbacks * / if ((index == 1 || index == 2 || index == 3) && nextIndex == 4) $ isAnimatedFourth.addClass ('animated zoomIn'). css ('animation-delay', '.6s'); $ isAnimatedFourthSingle.addClass ('animated lightSpeedIn'). css ('animation-delay', '1.2s') $ isAnimatedFourthSingle.one ('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function ) (this) .removeClass ' ') .addClass (' zoomOutDown '););

Hier erscheinen beide Absätze gleichzeitig mit der hineinzoomen Animation. Im Gegenteil erscheint die Schaltfläche mit der lightSpeedIn Animation.

Darüber hinaus hilft der folgende Code beim Erkennen, wann eine Animation endet:

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

In unserem Beispiel zeigen wir die Schaltfläche nur für ein paar Sekunden und nutzen dann den oben genannten Code, um ihn auszublenden.

Unten sehen Sie die eingebettete Codepen-Demo (obwohl die vollständige Seite der Demo viel effektiver ist):

Fazit

In diesem kurzen Tipp haben wir gelernt, wie wir die Bibliotheken fullpage.js und animate.css kombinieren können, um scrollbasierte Animationen zu erstellen.

Wenn Sie diese Demo verbessern möchten, sollten Sie zwei Dinge ausprobieren:

  • Aktivieren Sie die Animationen nur auf großen Bildschirmen. Um dies zu erreichen, verwenden Sie die matchMedia Methode.
  • Machen Sie den Code innerhalb der onLeave Funktion wiederverwendbar.
Web-Design
×