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à.

La guida per principianti al CSS Object Model (CSSOM)

Succede molto tra la prima richiesta HTTP e la consegna finale di una pagina web. La trasmissione dei dati e la pipeline di rendering del browser richiedono molte tecnologie diverse, tra cui il CSS Object Model o il CSSOM .Il CSS Object Model prende il codice CSS e rende ogni selettore in una struttura ad albero per semplificare l'analisi

(Consigli tecnici e di design)

Emulazione mobile in Google Chrome

Detto semplicemente, adoriamo Google Chrome. Funziona senza intoppi, ha un aspetto semplice e ha molte app utili. Dal punto di vista dello sviluppatore, Google Chrome è sempre un passo avanti in termini di supporto allo standard Web più recente, il che è ottimo.Viene inoltre fornito con una serie di strumenti per lo sviluppo web, alcuni dei quali devono ancora essere implementati in altri strumenti di sviluppo integrati del browser . Q

(Consigli tecnici e di design)