Share
Nel secondo tutorial di questa serie, hai imparato come animare diverse proprietà CSS degli elementi su una pagina web usando KUTE.js. Hai imparato come animare tutte le proprietà di trasformazione e proprietà come border-radius e colore del bordo. Puoi anche usare il plugin CSS per animare le proprietà CSS come dimensione del font, altezza della linea, spaziatura del carattere, e word-spacing.
KUTE.js ha anche un plug-in di testo che ti permette di animare il testo all'interno di diversi elementi, aumentando o diminuendo un numero come in un conto alla rovescia o scrivendo una stringa carattere per carattere.
In questo tutorial, imparerai come animare il testo all'interno di diversi elementi in una pagina web usando i plugin CSS e Text in KUTE.js.
Come accennato in precedenza, puoi utilizzare il plugin CSS KUTE.js per animare quattro diverse proprietà CSS relative al testo. Queste proprietà sono dimensione del font, altezza della linea, spaziatura del carattere, e word-spacing. Useremo anche alcune proprietà del motore principale discusse nel primo tutorial per animare le singole lettere. Vediamo come possiamo usare tutti questi concetti insieme per creare la vibrazione CIAO testo nella demo seguente.
Ecco il codice che è stato utilizzato per creare l'animazione di cui sopra:
Accentsconagua
var theLetters = document.querySelectorAll ("span"); var h = document.querySelector (". h"); var e = document.querySelector (". e"); var la = document.querySelector (". la"); var lb = document.querySelector (". lb"); var o = document.querySelector (". o"); var startButton = document.querySelector (". start"); var animateColor = KUTE.allFromTo (theLetters, color: 'white', color: 'red', offset: 200, duration: 50); var animateFontSize = KUTE.allFromTo (theLetters, fontSize: '2em', fontSize: '4em', offset: 100, durata: 200, ripetizione: 10, yoyo: true); var animateSkewing = KUTE.allTo (theLetters, skewX: -15, offset: 200, durata: 200); var animateH = KUTE.to (h, color: '# 009688'); var animateE = KUTE.to (e, translateY: -40, color: '# E91E63'); var animateLA = KUTE.to (la, color: '# 8BC34A'); var animateLB = KUTE.to (lb, translateY: 20, color: '# FFC107'); var animateO = KUTE.to (o, color: '# FF5722'); var lettersSqueezed = KUTE.allTo (theLetters, letterSpacing: '-15px', offset: 0, durata: 200); animateColor.chain (animateFontSize); animateFontSize.chain (animateSkewing); animateSkewing.chain (animateH, animateE, animateLA, animateLB, animateO); animateE.chain (lettersSqueezed); startButton.addEventListener ("click", function () animateColor.start ();, false);Ogni lettera della parola è racchiusa all'interno di a campata tag e ha una sua classe unica. La prima interpolazione anima il colore di tutte le lettere da bianco a rosso con un offset di 200 ms. Questa è anche la prima animazione che viene riprodotta dopo aver fatto clic su Avvia animazione. Il animateFontSize l'interpolazione è stata incatenata a animateColor. In questo modo, il dimensione del font l'animazione inizia non appena termina l'animazione del colore.
Avrai notato che ho usato due attributi chiamati ripetere e yoyo per controllare il comportamento dell'animazione. Il yoyo l'attributo è usato per invertire l'animazione che è attualmente riprodotta ripetutamente. Questo può evitare salti improvvisi nei valori di diverse proprietà durante l'animazione e farlo apparire liscio.
Il dimensione del font l'animazione è stata incatenata con animateSkewing, che distorce tutte le lettere di -15 gradi. Il skewX e skewY le proprietà sono disponibili all'interno del motore principale stesso.
Sono stati incatenati tutti i tween per l'animazione del colore di diverse lettere animateSkewing subito. In questo modo, puoi assicurarti che tutte le animazioni a colori concatenate inizino a suonare non appena termina l'animazione di inclinazione. Finalmente, il lettersSqueezed interpolazione riduce la spaziatura tra lettere diverse di 15 px.
Puoi creare effetti più interessanti utilizzando diverse combinazioni di proprietà.
Puoi anche animare i numeri in KUTE.js. Tuttavia, dovrai creare un plug-in di testo aggiuntivo per creare l'animazione.
Il processo di animazione dei numeri è in realtà molto semplice. Hai solo bisogno di specificare il selettore in cui devono essere mostrati i numeri di animazione e il numero finale a cui deve terminare l'animazione.
Ecco un esempio di base che mostra il numero totale di aeroporti negli Stati Uniti nel 2016 utilizzando l'animazione.
var usa = document.querySelector (". usa"); var startButton = document.querySelector (". start"); var animateUSA = KUTE.to (usa, numero: 19536); startButton.addEventListener ("click", function () animateUSA.start ();, false); Puoi anche applicare le normali opzioni di interpolazione come durata, ripetere, e ritardo per personalizzare il comportamento dell'animazione. Il codice che abbiamo appena scritto darà come risultato la seguente animazione:
Questo è un effetto molto popolare che puoi trovare su parecchi siti web. Il plug-in di testo KUTE.js consente di specificare la nuova frase che dovrebbe sostituire la frase originale un carattere alla volta.
Prima di sostituire i caratteri iniziali con il loro valore finale, i personaggi casuali sono animati come l'esempio dei numeri che hai appena visto. La demo di CodePen incorporata dovrebbe rendere più chiaro:
Ecco il codice che devi scrivere per creare l'animazione di cui sopra:
var animateHeading = KUTE.to (intestazione, testo: '70% Superficie della Terra è coperta con acqua. ', durata: 5000); startButton.addEventListener ("click", function () animateHeading.start ();, false);L'animazione del personaggio per l'intera frase è terminata entro 5 secondi. Come avrai notato, le frasi iniziali e finali non devono avere lo stesso numero di caratteri. Questo ci dà un sacco di libertà quando si imposta il valore del testo parametro.
Puoi anche includere tag HTML all'interno del valore di testo parametro e quindi utilizzare i CSS per modificare l'aspetto del testo appena animato.
var animateHeading = KUTE.to (intestazione, testo: '70% SUPERFICIE DI TERRA È COPERTO CON ACQUA.', duration: 10000, textChars:' upper ');
Ci sarà un ritardo nell'aspetto di Terra dopo di è già apparso. Questo succede perché anche il plugin scrive utilizzando la stessa animazione dei personaggi, ma nessuno di questi personaggi è effettivamente visibile all'utente. Il ritardo può o non può essere desiderabile in base alle tue preferenze.
I caratteri intermedi mostrati durante l'animazione sono valori alfabetici in minuscolo per impostazione predefinita. Questo può essere un problema quando i personaggi che vuoi animare sono tutti lettere o numeri maiuscoli. I caratteri intermedi utilizzati per l'animazione sono determinati dal valore di textChars parametro. Accetta sei diversi valori:
alfa: In questo caso, i caratteri intermedi saranno lettere minuscole.superiore: In questo caso, i caratteri intermedi saranno lettere maiuscole.numerico: In questo caso, i caratteri numerici vengono utilizzati per l'animazione. Questo è diverso dall'animazione di un numero in quanto i valori non aumenteranno in modo sequenziale.simboli: In questo caso, il plug-in utilizzerà caratteri come #,% e $ per le animazioni.tutti: È possibile utilizzare questo valore se si desidera che i caratteri intermedi siano un insieme di caratteri alfabetici, numerici e simboli.L'esempio seguente mostra come è possibile animare il testo all'interno di un'intestazione utilizzando caratteri intermedi maiuscoli.
In questo tutorial, hai imparato come utilizzare i plugin CSS e Text in KUTE.js per animare il testo all'interno di un elemento. Quando si desidera animare l'aspetto del testo, è necessario utilizzare il plugin CSS. Questo ti permetterà di usare proprietà come dimensione del font, spaziatura del carattere, ecc. Quando si desidera modificare i caratteri effettivi all'interno di un elemento, è necessario utilizzare il plug-in di testo.
Se stai cercando altre risorse JavaScript da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione su Envato Market.
Spero che tu abbia imparato qualcosa di nuovo in questo tutorial. Se avete domande, fatemelo sapere nei commenti.
