Skapa Cascading Effects enkelt med CascadeJS

Fancy animeringar är ett dime ett dussin på webben. De blir enklare att skapa med massor av otroliga animationsbibliotek.

Cascade.js är ett annat bibliotek att lägga till i listan, och det är definitivt en unik. Med Cascade kan du designa anpassade animationseffekter med kaskad bokstäver i text eller kaskad element i en huvudbehållare.

Detta bibliotek har inga beroenden; den körs på klassisk JavaScript. Du kan installera den via npm, Bower eller genom att ladda ner en kopia direkt från GitHub.

För att få CascadeJS att fungera ska du behöver två filer: en CSS-fil och en JavaScript-fil. De båda kommer packade med minifierade versioner för att spara några KB på sidstorlek.

Varje kaskadeelement delas upp i separata delar som animera individuellt genom element. Dessa är läggs dynamiskt, så du behöver inte ändra någonting i din HTML.

Men du måste ställa in strömma() fungera i din fil efter att ha inriktat på vilket element du vill animera.

Du kan faktiskt använd jQuery med det här biblioteket om du vill, men det är det krävs inte. Så, om du föredrar att välja element med jQuery, så använd det fritt att använda det istället.

Här är en utdrag av vanilj JavaScript från huvudplatsens demo:

Du kan passera strömma() element med inga parametrar, Eller kan du konfigurera dem alla själv. Det tar åtta valfria parametrar för att redigera animeringsstil, tid, varaktighet och valfria CSS-klasser.

CascadeJS har en annan funktion som heter fragment() vilket låter dig dela upp bokstäver (eller element) i separata behållare, utan att animera dem. Du kan använda den här funktionen till färg och restyltext på sidan genom att rikta in varje enskilt brev i ett ord. Ganska coolt, rätt?

Allt kodprover är öppet tillgängliga på huvudbibliotekssidan, så du kan kopiera / klistra in och tinka på egen hand. Men du hittar också dokumentation på GitHub-sidan om du letar efter ett tydligare sätt att komma igång.