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 incredibili librerie di animazioni .

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 non ha dipendenze ; funziona su JavaScript classico. Puoi installarlo tramite npm, Bower o scaricando una copia direttamente da GitHub.

Per far funzionare CascadeJS, avrai bisogno di due file : un file CSS e un file JavaScript. Entrambi vengono forniti con versioni minificate per risparmiare pochi KB sulla dimensione della pagina.

Ogni elemento Cascade viene suddiviso in parti separate che si animano individualmente attraverso gli elementi. Questi vengono aggiunti dinamicamente, quindi non è necessario modificare nulla nel codice HTML.

Ma, dovrai impostare la funzione flow() nel tuo file, dopo aver selezionato quale elemento vuoi animare.

È possibile utilizzare jQuery con questa libreria, se lo si desidera, tuttavia non è necessario . Quindi, se preferisci selezionare gli elementi con jQuery, puoi usare quello.

Ecco uno snippet di vanilla JavaScript dalla demo del sito principale:

È possibile passare l'elemento flow() senza parametri, oppure è possibile configurarli tutti da soli. Sono necessari otto parametri opzionali per modificare lo stile, i tempi, la durata e le classi CSS opzionali dell'animazione.

CascadeJS ha un'altra funzione chiamata fragment() che ti permette di suddividere lettere (o elementi) in contenitori separati, senza animarli. Puoi utilizzare questa funzione per colorare e ridimensionare il testo sulla pagina scegliendo come target ogni singola lettera di una parola. Piuttosto interessante, vero?

Tutti gli esempi di codice sono disponibili nella pagina della libreria principale, in modo che tu possa copiare / incollare e armeggiare da solo. Ma troverai anche la documentazione sulla pagina GitHub se stai cercando un modo più chiaro per iniziare.

Rendi tutti i contenuti incorporati reattivi con Reframe.js

La parte più delicata sull'incorporazione dei video sta nel correggere la larghezza e l'altezza. Questi numeri definiscono le proporzioni e quando sono spenti si ottiene un video player stupido .Questo è vero per tutti gli elementi incorporati come iframe e widget di social media. E queste cose possono essere ancora più complicate con il design reattivo perché di solito non sono elementi di risposta .Ma

(Consigli tecnici e di design)

20 splendidi esempi di cronologia in Web design per l'ispirazione

Sono abbastanza sicuro che molti di voi sono consapevoli dell'uso della timeline nel design, soprattutto perché tutti i profili di Facebook ora vengono visualizzati in questo modo. Inoltre, alcune app per smartphone come Path o Tweetbot utilizzano anche il design basato sulla timeline per mostrare le loro storie.

(Consigli tecnici e di design)