Vytvárajte kaskádové efekty s CascadeJS

Efektné animácie sú desiatkami na webe. Ľahšie sa vytvárajú s množstvom neuveriteľných vecí animačné knižnice.

Cascade.js je ďalšia knižnica, ktorá sa pridá do zoznamu, a určite je to jedinečná. Pomocou programu Kaskád môžete vytvoriť vlastné animačné efekty kaskádové písmená v texte alebo kaskádové prvky v hlavnom kontajneri.

Táto knižnica má žiadne závislosti; beží na klasickom javascript. Môžete ho nainštalovať prostredníctvom npm, Bower alebo stiahnutím kópie priamo od spoločnosti GitHub.

Aby ste CascadeJS pracovali, vy potrebujú dva súbory: súbor CSS a súbor JavaScript. Obaja sú balení minimalizované verzie aby ste ušetrili niekoľko KB na veľkosť stránky.

Každý prvok Cascade sa rozdelí na samostatné časti, ktoré animovať jednotlivo skrz prvky. Toto sú pridané dynamicky, takže nemusíte nič meniť v HTML.

Ale budete musieť nastaviť prietok () funkcie vo svojom súbore po zacielení na akýkoľvek prvok, ktorý chcete animovať.

Môžete skutočne používajte jQuery s touto knižnicou, ak chcete, ale je to tak nevyžaduje sa. Ak teda uprednostňujete výber prvkov pomocou jQuery, potom ho môžete použiť.

Tu je a úryvok jazyka vanilla JavaScript z demo hlavného webu:

Môžete prejsť prietok () element s žiadne parametre, alebo môžete nakonfigurujte ich všetky sami. Trvá to osem voliteľných parametrov na úpravu štýlu animácie, načasovania, trvania a voliteľných tried CSS.

CascadeJS má ďalšiu funkciu nazvanú Fragment () čo vám umožňuje rozdeliť písmená (alebo prvky) do samostatných kontajnerov bez ich animácie. Túto funkciu môžete použiť na farebný a restylovaný text na stránke zacieliť každé jednotlivé písmeno v jednom slove. Docela cool, správne?

všetko vzorky kódu sú otvorene k dispozícii na hlavnej stránke knižnice, takže môžete kopírovať / vkladať a drotovať na vlastnú päsť. Ale nájdete tu tiež dokumentácia na stránke GitHub, ak hľadáte jasnejší spôsob, ako začať.