Animare facilmente il testo con Textillate.js

Nel nostro precedente, vi presentiamo Animate.css, una fantastica libreria CSS3, che semplifica la creazione di animazioni CSS3. In questo post vi presenteremo un plugin jQuery, creato utilizzando Animate.css, che è in grado di animare il testo, chiamato Textillate.js .

Sebbene sia possibile animare il testo con Animate.css, è solo animato interamente, non lettera per lettera . Anche se si può avere un approccio di avvolgere ciascun personaggio in un elemento e animarlo, sarà problematico e non efficace. Con questo plugin, puoi animare facilmente ogni singola lettera del tuo testo.

Textillate.js divide l'animazione in 2 componenti, dentro e fuori l'animazione . Puoi applicarli con animazioni diverse, separatamente. Tutti gli effetti di animazione utilizzano effetti di libreria Animate.css.

Oltre a Animate.css, anche Textillate.js è basato su Lettering.js. Possiamo dire che questo plugin è la combinazione di questi 2 potenti strumenti. Animate.css funziona sulla funzione di animazione, mentre Lettering.js si concentra sulla tipografia .

uso

Textillate.js richiede alcune dipendenze prima che sia pronto per l'uso. Sono Animate.css, Lettering.js e jQuery. Dopo aver scaricato i file, includili nel tuo progetto, in questo modo.

E non dimenticare di mettere la libreria Animate.css nella sezione head.

Markup di base

Per iniziare a utilizzare Textillate.js, devi definire una classe di elementi che desideri animare, quindi aggiungere l'effetto scelto al suo interno . Si noti che questo plugin funziona solo su testo che contiene elementi, quindi qualsiasi elemento che non sia testo non verrà animato.

Ad esempio, abbiamo un elemento che contiene testo qui, e una classe demo, come tale.

Ognuna di questa lettera si animerà.

Chiamiamo il nome della classe con l'inizializzazione Textillate.js, in questo modo.

Il testo verrà ora animato.

Opzioni Textillate.js

Il codice Javascript precedente applicherà solo l'impostazione predefinita dell'animazione al testo. Per cambiarlo, ci sono due metodi che puoi usare.

1. Innanzitutto, immettendo l'API dei dati HTML come segue.

Ognuna di questa lettera si animerà.

data-in-effect definisce l'effetto di entrata del testo. Mentre per l'effetto exit, puoi usare data-out-effect api data-out-effect .

2. È inoltre possibile aggiungere le opzioni nell'inizializzazione JavaScript Textillate.js come il seguente codice.

Oltre effect, ci sono altre utili opzioni che potresti voler usare. Per vedere l'elenco completo delle altre opzioni, vai alla pagina della documentazione.

Pensiero finale

Textillate.js è un plugin molto utile soprattutto quando vuoi attirare gli utenti sul testo che vuoi evidenziare di più. Può essere la rubrica, i servizi, gli aggiornamenti, la promozione o qualsiasi altra cosa. E per ulteriori miglioramenti, puoi combinare Textillate.js con un altro plug-in come FitText.js designato per un testo di visualizzazione gigantesco. Ancora una volta, ricorda di usare l'animazione nelle giuste quantità.

20 Smashing Editorial Design Pezzi per la tua ispirazione

Con così tanti siti web con design e strutture simili al giorno d'oggi, è molto importante per qualsiasi web designer rimanere creativo e unico per distinguersi dalla massa . Questo non è sempre un compito così facile. Che ne dici di un approccio diverso al web design ? Oggi vorremmo portare la vostra attenzione sul design editoriale.Di

(Consigli tecnici e di design)

30 trucchi e infografica per gli esperti di marketing digitale

Un marketer digitale funziona su molti mezzi o piattaforme come social media, Internet, televisione, cartelloni pubblicitari, radio e persino SMS. Il dover stare in cima a questa vasta gamma di piattaforme significa che i marketer digitali devono stare al passo con le tendenze che influenzano i diversi aspetti di ciascun mezzo

(Consigli tecnici e di design)