Crea facilmente effetti a cascata con CascadeJS

Le animazioni fantasiose sono una dozzina di dozzine sul web. Stanno diventando più facili da creare con tonnellate di incredibile librerie di animazione.

Cascade.js è un'altra libreria da aggiungere alla lista, ed è sicuramente unica. Con Cascade, puoi progettare effetti di animazione personalizzati usando lettere a cascata nel testo o elementi a cascata in un contenitore principale.

Questa libreria ha nessuna dipendenza; funziona su JavaScript classico. Puoi installarlo tramite npm, Bower o scaricando una copia direttamente da GitHub.

Per far funzionare CascadeJS, lo farai bisogno di due file: un file CSS e un file JavaScript. Entrambi vengono imballati con versioni minificate per risparmiare qualche KB sulla dimensione della pagina.

Ogni elemento Cascade viene suddiviso in parti separate che animare individualmente attraverso elementi. Questi sono aggiunto dinamicamente, quindi non è necessario modificare nulla nel codice HTML.

Ma dovrai farlo configurare il flusso() funzione nel tuo file, dopo aver scelto come target qualsiasi elemento che desideri animare.

Puoi davvero usa jQuery con questa libreria se vuoi, comunque lo è non richiesto. Quindi, se preferisci selezionare gli elementi con jQuery, puoi usare quello.

Ecco un snippet di vaniglia JavaScript dalla demo del sito principale:

Puoi passare il flusso() elemento con nessun parametro, o puoi configurali tutti te stesso. Ci vuole otto parametri opzionali per modificare lo stile di animazione, i tempi, la durata e le classi CSS opzionali.

CascadeJS ha un'altra funzione chiamata frammento() che ti lascia dividere le lettere (o elementi) in contenitori separati, senza animarli. È possibile utilizzare questa funzione per testo a colori e restyling sulla pagina puntando ogni singola lettera in una parola. Molto bello, giusto?

Tutti esempi di codice sono apertamente disponibili nella pagina della libreria principale, quindi puoi copiare / incollare e armeggiare da solo. Ma troverai anche il documentazione nella pagina GitHub se stai cercando un modo più chiaro per iniziare.