Share
În cel de-al doilea tutorial al acestei serii, ați învățat cum să animați diferite proprietăți CSS ale elementelor dintr-o pagină Web utilizând KUTE.js. Ați învățat cum să animați toate proprietățile transformate, precum și proprietățile de genul border-radius și border-color. De asemenea, puteți utiliza pluginul CSS pentru a anima proprietățile CSS marimea fontului, inaltimea liniei, spațiul dintre litere, și cuvânt-spațiere.
KUTE.js are, de asemenea, un plugin Text care vă permite să animați textul în interiorul diferitelor elemente, fie prin mărirea sau scăderea numărului ca într-o inversă, fie prin scrierea unui caracter de caractere de caractere.
În acest tutorial, veți învăța cum să animați textul în interiorul diferitelor elemente dintr-o pagină web folosind pluginurile CSS și Text în KUTE.js.
După cum am menționat mai devreme, puteți utiliza pluginul CUTE.js CSS pentru a anima patru proprietăți CSS legate de text. Aceste proprietăți sunt marimea fontului, inaltimea liniei, spațiul dintre litere, și cuvânt-spațiere. De asemenea, vom folosi câteva proprietăți din motorul principal discutat în primul tutorial pentru animarea literelor individuale. Să vedem cum putem folosi toate aceste concepte împreună pentru a crea vibrația SALUT text în demo-ul următor.
Iată codul care a fost folosit pentru a crea animația de mai sus:
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 (Literele, culoare: 'alb', culoare: 'roșu', offset: 200, duration: 50); var animateFontSize = KUTE.allFromTo (Literele, fontSize: '2em', fontSize: '4em', offset: 100, durata: 200, repetare: 10, yoyo: true); var animateSkewing = KUTE.allTo (Literele, skewX: -15, offset: 200, duration: 200); var animateH = KUTE.to (h, culoare: '# 009688'); var animateE = KUTE.to (e, translateY: -40, culoare: '# E91E63'); var animateLA = KUTE.to (la, culoare: '# 8BC34A'); var animateLB = KUTE.to (lb, translateY: 20, culoare: '# FFC107'); var animateO = KUTE.to (o, culoare: '# FF5722'); var lettersSqueezed = KUTE.allTo (Literele, letterSpacing: '-15px', offset: 0, duration: 200); animateColor.chain (animateFontSize); animateFontSize.chain (animateSkewing); animateSkewing.chain (animateH, animateE, animateLA, animateLB, animateO); animateE.chain (lettersSqueezed); startButton.addEventListener ("faceți clic", funcția () animateColor.start ();, false);Fiecare literă a cuvântului este înfășurată în interiorul a deschidere tag și are propria clasă unică. Primul tween animă culoarea tuturor literelor de la alb la roșu, cu un decalaj de 200 ms. Aceasta este și prima animație care se joacă după ce faceți clic pe Începeți animația. animateFontSize tween a fost înlănțuită animateColor. În acest fel, marimea fontului animația începe imediat ce animația de culoare se termină.
S-ar putea să fi observat că am folosit două atribute numite repeta și YOYO pentru a controla comportamentul animației. YOYO este folosit pentru a inversa în mod repetat animația care este în curs de redare. Acest lucru poate evita sărituri bruște în valori ale diferitelor proprietăți în timpul animației și să o facă să pară netedă.
marimea fontului animația a fost înlănțuită cu animateSkewing, care înclină toate literele cu -15 grade. skewX și skewY proprietățile sunt disponibile în interiorul motorului principal.
Toate tweens-urile pentru animarea culorii diferitelor litere au fost înlănțuite animateSkewing o dată. În acest fel, puteți să vă asigurați că toate animațiile de culori înlănțuite încep să fie redate imediat ce animația oblică se termină. În cele din urmă, lettersSqueezed tween reduce distanța dintre diferite litere cu 15 px.
Puteți crea efecte mai interesante utilizând diferite combinații de proprietăți.
Puteți, de asemenea, să animați numere în KUTE.js. Cu toate acestea, va trebui să includeți un plugin suplimentar de text pentru a crea animația.
Procesul de animare a numerelor este de fapt foarte simplu. Trebuie doar să specificați selectorul unde trebuie afișate numerele de animație, precum și numărul final la care ar trebui să se termine animația.
Iată un exemplu de bază care arată numărul total de aeroporturi din SUA în 2016, folosind animația.
var usa = document.querySelector ("usa"); var startButton = Document.querySelector ("Start"); var animateUSA = KUTE.to (SUA, număr: 19536); startButton.addEventListener ("faceți clic pe", funcția () animateUSA.start ();, false); De asemenea, puteți aplica opțiunile personalizate cum ar fi durată, repeta, și întârziere pentru a personaliza comportamentul animației. Codul pe care tocmai l-am scris va avea ca rezultat animația următoare:
Acesta este un efect foarte popular pe care îl puteți găsi pe câteva site-uri web. Pluginul text KUTE.js vă permite să specificați noua propoziție care ar trebui să înlocuiască propoziția originală un caracter la un moment dat.
Înainte de a înlocui caracterele inițiale cu valoarea finală, caracterele aleatoare sunt animate ca exemplul numerelor pe care tocmai l-ați văzut. Demo-ul CodePen încorporat ar trebui să facă mai clară:
Iată codul pe care trebuie să-l scrieți pentru a crea animația de mai sus:
var animateHeading = KUTE.to (titlu, text: '70% Suprafața Pământului este acoperită cu apă ', duration: 5000); startButton.addEventListener ("faceți clic pe", funcția () animateHeading.start ();, false);Animația caracterului pentru întreaga propoziție este terminată în 5 secunde. Așa cum ați fi observat, propozițiile inițiale și finale nu trebuie să aibă același număr de caractere. Acest lucru ne oferă o mulțime de libertate atunci când stabilim valoarea text parametru.
De asemenea, puteți include etichete HTML în interiorul valorii text parametru și apoi utilizați CSS pentru a modifica aspectul textului pe care tocmai l-ați animat.
var. animație de. (titlu, text: '70% SURFACE OF PĂMÂNT ESTE COPERAT CU APĂ.', duration: 10000, textChars:' superior ');
Va exista o întârziere în apariția lui Pământ după de a apărut deja. Acest lucru se întâmplă deoarece pluginul scrie, de asemenea folosind aceeași animație de caractere, dar niciuna dintre aceste caractere nu este de fapt vizibilă pentru utilizator. Întârzierea poate sau nu poate fi de dorit pe baza preferințelor dvs..
Caracterele intermediare afișate în timpul animației sunt în mod implicit valori alfabetice mici. Aceasta poate fi o problemă atunci când caracterele pe care doriți să le animați sunt toate litere sau numere mari. Ce caractere intermediare sunt folosite pentru animație este determinată de valoarea lui textChars parametru. Acceptă șase valori diferite:
alfa: În acest caz, caracterele intermediare vor fi litere mici.superior: În acest caz, caracterele intermediare vor fi litere mari.numeric: În acest caz, caracterele numerice sunt folosite pentru animație. Acest lucru este diferit de animarea unui număr, deoarece valorile nu vor crește secvențial.simboluri: În acest caz, pluginul va folosi caractere precum #,% și $ pentru animații.toate: Puteți utiliza această valoare dacă doriți ca caracterele intermediare să fie un amestec de litere alfabetice, numerice și simboluri.Următorul exemplu arată modul în care puteți anima textul dintr-o rubrică utilizând caractere intermediare mari.
În acest tutorial, ați învățat cum să utilizați pluginurile CSS și Text în KUTE.js pentru a anima textul din interiorul unui element. Când doriți să animați aspectul textului, trebuie să utilizați pluginul CSS. Acest lucru vă va permite să utilizați proprietăți cum ar fi marimea fontului, spațiul dintre litere, etc Când doriți să modificați caracterele reale în interiorul oricărui element, trebuie să utilizați pluginul de text.
Dacă sunteți în căutarea unor resurse JavaScript suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem disponibil pe Envato Market.
Sper că ați învățat ceva nou în acest tutorial. Dacă aveți întrebări, vă rugăm să ne anunțați în comentarii.
