Lag Cascading Effects enkelt med CascadeJS

Fancy animasjoner er et dime et dusin på nettet. De blir enklere å lage med tonnevis av utrolig animasjonsbiblioteker.

Cascade.js er et annet bibliotek å legge til i listen, og det er definitivt en unik en. Med Cascade kan du designe tilpassede animasjons effekter ved hjelp av cascading bokstaver i tekst eller cascading elementer i en hovedbeholder.

Dette biblioteket har ingen avhengigheter; den kjører på klassisk JavaScript. Du kan installere den via npm, Bower, eller ved å laste ned en kopi rett fra GitHub.

For å få CascadeJS til å fungere, vil du trenger to filer: en CSS-fil og en JavaScript-fil. De kommer begge sammen med minifiserte versjoner for å spare deg for noen få kB på sidestørrelse.

Hvert Cascade-element brytes ned i separate deler som animere individuelt gjennom elementer. Disse er lagt til dynamisk, slik at du ikke trenger å endre noe i HTML-en din.

Men du må sette opp strømme() funksjon i filen din, etter å ha målrettet mot det elementet du vil animere.

Du kan faktisk bruk jQuery med dette biblioteket hvis du vil, men det er det ikke obligatorisk. Så, hvis du foretrekker å velge elementer med jQuery, må du gjerne bruke det i stedet.

Her er en brikke av vanilla JavaScript fra hovedstedets demo:

Du kan passere strømme() element med ingen parametere, eller du kan konfigurer dem alle deg selv. Det tar åtte valgfrie parametere for redigering av animasjonsstil, timing, varighet og valgfrie CSS-klasser.

CascadeJS har en annen funksjon som heter fragment() som lar deg del opp bokstaver (eller elementer) i separate beholdere uten å animere dem. Du kan bruke denne funksjonen til farge og restylitekst på siden ved å målrette hvert enkelt brev i et ord. Ganske kul, ikke sant?

Alle kodeksempler er åpent tilgjengelig på hovedbibliotekssiden, slik at du kan kopiere / lime og tinker på egen hånd. Men du finner også dokumentasjon på GitHub-siden hvis du leter etter en klarere måte å komme i gang.