Stvorite kaskadne efekte jednostavno uz CascadeJS

Fancy animacije su deset centi na webu. Postaju lakše stvarati s nevjerojatnim tonom animacijske knjižnice.

Cascade.js je još jedna knjižnica koju možete dodati na popis i definitivno je jedinstvena. Uz Cascade možete dizajnirati prilagođene efekte animacije koristeći kaskadna slova u tekstu ili kaskadni elementi u glavnom spremniku.

Ova knjižnica ima nema ovisnosti; radi na klasičnom JavaScriptu. Možete ga instalirati kroz npm, Bower ili preuzimanjem kopije izravno s GitHub-a.

Da bi CascadeJS radio, morat ćete trebate dvije datoteke: CSS datoteka i JavaScript datoteka. Obojica dolaze u paketu izmijenjene verzije da biste uštedjeli nekoliko KB u veličini stranice.

Svaki element kaskade se razlaže u zasebne dijelove animirati pojedinačno kroz elementi. Ovi su dodan dinamički, tako da ne morate ništa mijenjati u HTML-u.

Ali, morat ćete postaviti teći() funkcija u datoteci, nakon ciljanja bilo kojeg elementa koji želite animirati.

Zapravo možete koristite jQuery ako želite, bez obzira na to nije obavezno. Dakle, ako vam je draže odabrati elemente s jQuery, slobodno ga koristite umjesto toga.

Evo jednog isječak vanilije JavaScript s demo prikaza glavne web-lokacije:

Možete proći teći() element s nema parametara, ili možete konfigurirajte ih sve sami. Treba osam izbornih parametara za uređivanje stila animacije, vremena, trajanja i neobaveznih CSS klasa.

CascadeJS ima još jednu funkciju fragment() koji vam omogućuje razdvojiti slova (ili elemente) u zasebne spremnike, bez animiranja. Ovu funkciju možete koristiti za tekst i tekstualni tekst na stranici ciljanjem svakog pojedinačnog slova u riječi. Prilično cool, točno?

svi uzorke koda su otvoreno dostupne na glavnoj stranici biblioteke, tako da možete sami kopirati / zalijepiti i tinker. Ali, pronaći ćete i dokumentacija na stranici GitHub ako tražite jasniji način za početak.