Lav Cascading Effects nemt med CascadeJS

Fancy animationer er et dime et dusin på nettet. De bliver lettere at skabe med tonsvis af utrolige animationsbiblioteker.

Cascade.js er et andet bibliotek at tilføje til listen, og det er helt sikkert en unik. Med Cascade kan du designe brugerdefinerede animations effekter ved hjælp af kaskende bogstaver i tekst eller cascading elementer i en hovedbeholder.

Dette bibliotek har ingen afhængigheder; den kører på klassisk JavaScript. Du kan installere det via npm, Bower eller ved at downloade en kopi lige fra GitHub.

For at få CascadeJS til at fungere, vil du har brug for to filer: en CSS-fil og en JavaScript-fil. De begge kommer pakket med miniverede versioner for at spare dig for et par KB'er på sidestørrelse.

Hvert Cascade-element brydes ned i separate dele som animere individuelt igennem elementer. Disse er tilføjet dynamisk, så du behøver ikke ændre noget i din HTML.

Men det bliver du nødt til konfigurere flyde() fungere i din fil efter at have målrettet mod det element du vil animere.

Du kan faktisk brug jQuery med dette bibliotek, hvis du vil, men det er det ikke påkrævet. Så hvis du foretrækker at vælge elementer med jQuery, er du så velkommen til at bruge det i stedet.

Her er en uddrag af vanilla JavaScript fra hovedstedets demo:

Du kan passere flyde() element med ingen parametre, eller du kan konfigurere dem alle dig selv. Det tager otte valgfrie parametre til redigering af animationsstil, timing, varighed og valgfri CSS-klasser.

CascadeJS har en anden funktion kaldet fragment() som lader dig opdele bogstaver (eller elementer) i separate beholdere uden at animere dem. Du kan bruge denne funktion til farve og restyle tekst på siden ved at målrette hvert enkelt bogstav i et ord. Godt, rigtigt?

Alle kode prøver er åbent tilgængelige på hovedbibliotekssiden, så du kan kopiere / indsætte og tinker på egen hånd. Men du finder også dokumentation på GitHub-siden, hvis du leder efter en klarere vej til at komme i gang.