Vytvořit Cascading efekty snadno s CascadeJS

Efektní animace jsou na internetu desetkrát. Jsou stále snazší vytvářet s neuvěřitelným množstvím animační knihovny.

Cascade.js je ještě jedna knihovna přidat do seznamu, a to je určitě jedinečný. S Cascade, můžete navrhnout vlastní efekty animace pomocí kaskádové dopisy v textu nebo kaskádové prvky v hlavní nádobě.

Tato knihovna má žádné závislosti; běží na klasickém JavaScriptu. Můžete jej nainstalovat prostřednictvím npm, Bower nebo stažením kopie přímo z GitHubu.

Chcete-li získat CascadeJS práci, budete dva soubory: soubor CSS a soubor JavaScript. Oba přicházejí zabaleni verze ušetřit pár KB na velikost stránky.

Každý prvek Cascade se rozdělí na jednotlivé části, které animovat individuálně přes Prvky. Tyto jsou přidány dynamicky, takže v HTML nemusíte nic měnit.

Ale budete muset nastavit tok() funkce ve vašem souboru po zacílení jakéhokoli prvku, který chcete animovat.

Můžete vlastně použijte jQuery s touto knihovnou, pokud chcete, ale je to není požadováno. Takže, pokud dáváte přednost výběru prvků s jQuery, pak to neváhejte použít.

Tady je útržek vanilky JavaScript z demo hlavního webu:

Můžete projít tok() prvek s žádné parametry, nebo můžete konfigurovat všechny vy sám. Trvá to osm volitelných parametrů pro úpravu stylu animace, načasování, trvání a volitelných tříd CSS.

CascadeJS má jinou funkci fragment() který vám umožní rozdělit písmena (nebo prvky) do samostatných kontejnerů, aniž by je animovaly. Tuto funkci můžete použít barevný a restyle text na stránce cílením každého jednotlivého písmene na slovo. Docela v pohodě?

Všechno ukázky kódu jsou otevřeně k dispozici na hlavní stránce knihovny, takže si můžete kopírovat / vkládat a vkládat vlastní poznámky. Ale také najdete dokumentace na stránce GitHub, pokud hledáte jasnější způsob, jak začít.