Izveidojiet kaskādes efektus viegli ar CascadeJS

Fancy animācijas ir desmiti ducis tīmeklī. Viņi kļūst vieglāk izveidot ar neticamu tonnu animācijas bibliotēkas.

Cascade.js ir vēl viena bibliotēka, kas jāpievieno sarakstam, un tas noteikti ir unikāls. Izmantojot Cascade, varat izveidot pielāgotus animācijas efektus, izmantojot kaskādes burti tekstu vai kaskādes elementi galvenajā traukā.

Šī bibliotēka ir nav atkarību; tas darbojas klasiskajā JavaScript. To var instalēt, izmantojot npm, Bower vai lejupielādējot kopiju tieši no GitHub.

Lai iegūtu CascadeJS darbu, jūs nepieciešams divi faili: CSS fails un JavaScript fails. Viņi abi ir iepakoti rediģētas versijas lai saglabātu dažus KB izmērus.

Katrs kaskādes elements tiek sadalīts atsevišķās daļās dzīvot individuāli caur elementiem. Šie ir dinamiski, tāpēc jums nav nepieciešams kaut ko mainīt savā HTML.

Bet jums būs nepieciešams izveidot plūsma () funkciju failā, pēc mērķauditorijas atlases neatkarīgi no elementa, kuru vēlaties animēt.

Jūs faktiski varat izmantojiet jQuery ja vēlaties, ar šo bibliotēku nav nepieciešams. Tātad, ja vēlaties izvēlēties elementus ar jQuery, tad varat to izmantot.

Lūk, a vaniļas JavaScript fragmentu no galvenās vietnes demonstrācijas:

Jūs varat iziet plūsma () elements ar nav parametru, vai jūs varat konfigurēt tos visus sevi. Tas prasa astoņi izvēles parametri animācijas stila, laika, ilguma un izvēles CSS klases rediģēšanai.

CascadeJS ir vēl viena funkcija, ko sauc fragments () kas ļauj jums sadalīt burtus (vai elementus) atsevišķos konteineros, bez to animācijas. Šo funkciju var izmantot krāsu un restyle tekstu lapā, mērķējot katru atsevišķu burtu vārdā. Diezgan foršs, labi?

Visi koda paraugus tie ir atklāti pieejami galvenajā bibliotēkas lapā, lai jūs varētu kopēt / ielīmēt un ielīmēt. Bet jūs atradīsiet arī dokumentācija GitHub lapā, ja meklējat skaidrāku veidu, kā sākt.