Creați efecte cascadă cu ușurință cu CascadeJS

Animațiile animate sunt un dime o duzină pe web. Ele devin mai ușor de creat cu tone de incredibil animații biblioteci.

Cascade.js este încă o bibliotecă care se adaugă la listă și este cu siguranță unică. Cu Cascade, puteți crea efecte de animație personalizate folosind cascadă litere în text sau elemente cascading într-un container principal.

Această bibliotecă are fără dependențe; ruleaza pe JavaScript clasic. Puteți să-l instalați prin npm, Bower sau prin descărcarea unei copii chiar de la GitHub.

Pentru ca CascadeJS să funcționeze, vei face asta nevoie de două fișiere: un fișier CSS și un fișier JavaScript. Amândoi vin ambalate versiuni minime pentru a vă salva câteva KB pe dimensiunea paginii.

Fiecare element Cascade se împarte în părți separate, care animați individual prin elemente. Acestea sunt adăugată dinamic, astfel încât nu este nevoie să modificați nimic în HTML.

Dar, va trebui configurați curgere() funcţie în fișierul dvs., după ce ați vizat orice element doriți să animați.

De fapt, puteți utilizați jQuery cu această bibliotecă dacă vrei, totuși este nu este necesar. Deci, dacă preferați selectarea elementelor cu jQuery, atunci nu ezitați să o utilizați în schimb.

Iată a fragment de JavaScript de vanilie de la demo-ul principal al site-ului:

Puteți să treceți curgere() element cu fără parametri, sau puteți configurați-le pe toate tu. Este nevoie de opt parametri opționali pentru editarea stilului de animație, calendarul, durata și clasele opționale CSS.

CascadeJS are o altă funcție numită fragment() care vă permite împărțiți litere (sau elemente) în recipiente separate, fără a le anima. Puteți utiliza această funcție pentru a culoarea și textura restaiată pe pagină prin direcționarea fiecărei litere individuale într-un cuvânt. Destul de cool, corect?

Toate exemple de coduri sunt disponibile în mod deschis pe pagina principală a bibliotecii, astfel încât puteți să copiați / să le lipiți pe cont propriu. Dar, veți găsi, de asemenea documentație pe pagina GitHub dacă sunteți în căutarea unui mod mai clar de a începe.