CascadeJS-ekkel egyszerűen hozzon létre lépcsőzetes hatást

A képzelet animációk egy tucatnyi póker az interneten. Könnyebben hozhatók létre hihetetlen tonna animációs könyvtárak.

Cascade.js még egy könyvtár, amely hozzáadhat a listához, és ez minden bizonnyal egyedülálló. A Cascade segítségével egyedi animációs effektusokat tervezhet lépcsőzetes betűk szövegben vagy lépcsőzetes elemek egy fő tartályban.

Ez a könyvtár rendelkezik nincs függőség; a klasszikus JavaScript-en fut. Telepítheti az npm, Bower vagy a másolat közvetlenül a GitHub-ból történő letöltésével.

Ahhoz, hogy CascadeJS-t dolgozzon, akkor két fájlra van szüksége: CSS fájl és JavaScript fájl. Mindketten csomagolva vannak módosított változatok néhány KB-t megtakaríthat az oldalméretben.

Minden egyes kaszkád elem külön részekre bontható, amelyek éljenek egyedileg keresztül elemekkel. Ezek dinamikusan, így nem kell semmit sem változtatnia a HTML-ben.

De szükséged lesz rá állítsa be a folyam() funkció a fájlban, miután megcélozta az animálni kívánt elemet.

Valóban használja a jQuery-t ha ezt szeretné, akkor ez a könyvtár nem szükséges. Tehát, ha inkább elemeket szeretne kiválasztani a jQuery-vel, akkor nyugodtan használja ezt.

Itt van egy vanília JavaScript töredéke a főoldal demójából:

Átadhatod a folyam() elem nincsenek paraméterek, vagy tudsz konfigurálja őket saját magad. Elég nyolc opcionális paraméter az animációs stílus, az időzítés, az időtartam és az opcionális CSS osztályok szerkesztéséhez.

A CascadeJS-nek egy másik funkciója van töredék() ami lehetővé teszi felosztott betűk (vagy elemek) külön tartályokba, anélkül, hogy azokat animálni kellene. Ezt a funkciót használhatja szín és restyle szöveg az oldalon az egyes betűk egy szó szerinti megcélzásával. Elég hűvös, igaz?

Minden kódmintákat a főkönyvtároldalon nyíltan elérhető, így ön is másolhat / beilleszthet és beilleszthet. De meg fogja találni a dokumentáció a GitHub oldalon, ha világosabb módszert keres az induláshoz.