Erstellen Sie mit CascadeJS auf einfache Weise Kaskadeneffekte

Fantastische Animationen sind ein Dutzend im Web. Sie werden mit Tonnen von Unglaublichem leichter zu erstellen Animationsbibliotheken.

Cascade.js ist eine weitere Bibliothek, die der Liste hinzugefügt werden kann, und es ist definitiv eine einzigartige. Mit Cascade können Sie benutzerdefinierte Animationseffekte mit erstellen kaskadierende Buchstaben im Text oder kaskadierende Elemente in einem Hauptbehälter.

Diese Bibliothek hat keine Abhängigkeiten; es läuft mit klassischem JavaScript. Sie können es über npm, Bower oder durch Herunterladen einer Kopie von GitHub installieren.

Damit CascadeJS funktioniert, müssen Sie brauche zwei Dateien: eine CSS-Datei und eine JavaScript-Datei. Sie kommen beide verpackt mit reduzierte Versionen um einige KBs auf Seitengröße zu sparen.

Jedes Cascade-Element wird in einzelne Teile zerlegt individuell animieren durch Elemente. Diese sind dynamisch hinzugefügt, Sie müssen also nichts in Ihrem HTML-Code ändern.

Aber du musst es tun das einrichten fließen() Funktion in Ihrer Datei nach dem Targeting des Elements, das Sie animieren möchten.

Das kannst du eigentlich Verwenden Sie jQuery mit dieser Bibliothek, wenn Sie möchten, wie auch immer nicht benötigt. Wenn Sie es vorziehen, Elemente mit jQuery auszuwählen, können Sie dies stattdessen verwenden.

Hier ist ein Ausschnitt von Vanille JavaScript von der Haupt-Site-Demo:

Sie können das übergeben fließen() Element mit keine Parameter, oder du kannst konfiguriere sie alle dich selbst. Es braucht acht optionale Parameter zur Bearbeitung von Animationsstil, Timing, Dauer und optionalen CSS-Klassen.

CascadeJS hat eine andere Funktion aufgerufen Fragment() das lässt dich Buchstaben (oder Elemente) aufteilen in separate Behälter, ohne sie zu animieren. Sie können diese Funktion verwenden, um Farbe und Restyle-Text auf der Seite, indem Sie jeden einzelnen Buchstaben in einem Wort als Ziel festlegen. Ziemlich cool, richtig?

Alles Codebeispiele sind auf der Hauptbibliothekseite offen verfügbar, sodass Sie selbst kopieren, einfügen und basteln können. Aber Sie finden auch die Dokumentation auf der GitHub-Seite, wenn Sie nach einem klareren Einstieg suchen.