CascadeJS abil saate luua kaskaadefekte

Fancy animatsioonid on pisikene tosin veebis. Nad saavad kergemini luua tonni uskumatuid animatsiooniraamatukogud.

Cascade.js on veel üks raamatukogu, mida loendisse lisada, ja see on kindlasti ainulaadne. Cascade abil saate kujundada kohandatud animatsiooniefekte kaskaadilised tähed tekstis või kaskaadelemendid peamahutis.

See raamatukogu on mingeid sõltuvusi; see töötab klassikalises JavaScriptis. Te saate selle installida läbi npm, Bower või allalaadides koopia otse GitHubist.

CascadeJSi töötamiseks saate vajavad kahte faili: CSS-fail ja JavaScript-fail. Nad mõlemad on pakitud redigeeritud versioonid säästa paar KB-i lehekülje suuruses.

Iga kaskaadielement jaguneb eraldi osadeks animeerida individuaalselt läbi elemente. Need on dünaamiliselt, nii et sa ei pea midagi oma HTML-is muutma.

Aga sa pead luua vool () funktsiooni oma failis pärast sihtimist mis tahes elemendi, mida soovite animeerida.

Võite tegelikult kasutage jQuery kui soovid seda raamatukogu, on see siiski pole nõutud. Niisiis, kui eelistate elementide valimist jQuery'ga, kasutage seda vabalt.

Siin on a vanilli JavaScripti väljavõte saidi demost:

Saate selle edasi anda vool () elemendiga parameetreid pole, või saate seadistage need kõik ise. See võtab kaheksa valikulist parameetrit animatsiooni stiili, ajastuse, kestuse ja valikuliste CSS klasside redigeerimiseks.

CascadeJS-il on veel üks funktsioon fragment () mis võimaldab teil eraldatud tähed (või elemendid) eraldi anumatesse, ilma neid animeerimata. Seda funktsiooni saate kasutada värvi ja restyle teksti leheküljel, suunates iga üksiku kirja ühe sõna. Päris lahe, õige?

Kõik koodi näidised on pearaamatukogu lehel avalikult kättesaadavad, nii et saate ise kopeerida / kleepida. Aga leiad ka dokumentatsioon GitHubi lehel, kui otsite selgemat viisi alustada.