Ustvarite Cascading Effects lahek z CascadeJS

Fancy animacije so deset centimetrov na spletu. Z lahkoto ustvarjamo s tonami neverjetnih knjižnice za animacijo.

Cascade.js je še ena knjižnica, ki jo lahko dodate na seznam, in zagotovo je edinstvena. S funkcijo Cascade lahko ustvarite učinke animacije po meri z uporabo kaskadna pisma v besedilu ali kaskadni elementi v glavni posodi.

Ta knjižnica ima brez odvisnosti; deluje na klasičnem JavaScriptu. Namestite ga lahko z npm, Bower ali s prenosom pravice iz GitHub.

Če želite, da CascadeJS deluje, boste potrebujete dve datoteki: datoteka CSS in datoteka JavaScript. Oba sta prišla zapakirana omejene različice Če želite prihraniti nekaj KB na velikosti strani.

Vsak element kaskade se razdeli na ločene dele, ki animirati posamezno skozi elementov. To so dodano dinamično, zato vam ni treba ničesar spreminjati v HTML-ju.

Ampak, boste morali nastavite tok () funkcijo v datoteki, potem ko ste ciljali kateri koli element, ki ga želite animirati.

Lahko dejansko uporabite jQuery s to knjižnico, če želite, pa naj bo ni zahtevano. Torej, če raje izberete elemente z jQuery, ga raje uporabite.

Tukaj je a odrezek vanilije JavaScript iz predstavitve glavne strani:

Lahko prenesete tok () element z brez parametrov, ali lahko vse nastavite sami. Vzame osem neobveznih parametrov za urejanje sloga animacije, časa, trajanja in neobveznih razredov CSS.

CascadeJS ima še eno funkcijo Drobec() ki vam omogoča razdeli črke (ali elemente) v ločene posode, ne da bi jih animirali. To funkcijo lahko uporabite za barvno in preoblikovano besedilo na strani s ciljanjem vsake posamezne črke v besedi. Precej kul, prav?

Vse vzorci kod so odprte na glavni strani knjižnice, tako da lahko sami kopirate / prilepite in rokujete. Toda našli boste tudi dokumentacijo na strani GitHub, če iščete jasnejši način za začetek.