Luo Cascade Effects helposti CascadeJS n avulla

Fancy-animaatiot ovat kymmenkunta verkosta. Niitä on helpompi luoda luotettavilla tonneilla animaatiokirjastot.

Cascade.js on vielä yksi kirjasto, joka voidaan lisätä luetteloon, ja se on varmasti ainutlaatuinen. Cascaden avulla voit suunnitella mukautettuja animaatiovaikutuksia käyttämällä kaskadi-kirjaimet tekstissä tai porrastetut elementit pääsäiliössä.

Tämä kirjasto on ei ole riippuvuuksia; se toimii klassisessa JavaScriptissä. Voit asentaa sen npm: n, Bowerin tai lataamalla kopion suoraan GitHubista.

Saat CascadeJS: n toimimaan tarvitsevat kaksi tiedostoa: CSS-tiedosto ja JavaScript-tiedosto. He molemmat tulevat pakattuina minimoidut versiot säästää muutamia KB-sivuja sivun koossa.

Jokainen Cascade-elementti jakautuu erillisiin osiin animoida yksilöllisesti kautta elementtejä. Nämä ovat lisätty dynaamisesti, joten sinun ei tarvitse muuttaa mitään HTML-koodissasi.

Mutta sinun täytyy perustaa virtaus() toimia tiedostossa, kun olet kohdistanut haluamasi elementin.

Voit itse käytä jQueryä tämän kirjaston kanssa, jos haluat, kuitenkin ei vaadittu. Joten, jos haluat valita elementit jQueryn kanssa, voit käyttää sitä sen sijaan.

Tässä on a katkelma vanilja JavaScript pääsivuston demosta:

Voit siirtää virtaus() elementti ei ole parametreja, tai voit määritä ne kaikki sinä itse. Se ottaa kahdeksan valinnaista parametria animaatiotyyli, ajoitus, kesto ja valinnaiset CSS-luokat.

CascadeJS: llä on toinen toiminto, jota kutsutaan kappale() jonka avulla voit jaetut kirjaimet (tai elementit) erillisiin säiliöihin ilman, että niitä animoidaan. Voit käyttää tätä toimintoa väri- ja restyle-teksti sivulle kohdistamalla jokainen yksittäinen kirjain sanalla. Aika viileä?

Kaikki koodinäytteet ovat avoimesti saatavilla pääkirjaston sivulla, joten voit kopioida / liittää ja peittää itse. Mutta löydät myös dokumentointi GitHub-sivulla, jos etsit selkeämpää tapaa aloittaa.