Share
I den andre opplæringen i denne serien lærte du å animere forskjellige CSS-egenskaper av elementene på en nettside ved hjelp av KUTE.js. Du lærte å animere alle transformasjonsegenskapene, så vel som egenskaper som border-radius og grensefarge. Du kan også bruke CSS-pluginet til å animere CSS-egenskaper som skriftstørrelse, linjehøyde, avstand mellom bokstavene, og ord-spacing.
KUTE.js har også et Tekst-plugin som lar deg animere teksten i forskjellige elementer, enten ved å øke eller redusere et tall som i nedtelling eller ved å skrive en strengkarakter etter tegn.
I denne opplæringen lærer du hvordan du animerer teksten i forskjellige elementer på en nettside ved hjelp av CSS og Text plugins i KUTE.js.
Som nevnt tidligere, kan du bruke KUTE.js CSS-plugin for å animere fire forskjellige tekstrelaterte CSS-egenskaper. Disse egenskapene er skriftstørrelse, linjehøyde, avstand mellom bokstavene, og ord-spacing. Vi vil også bruke noen egenskaper fra kjernemotoren som er omtalt i første veiledning for å animere individuelle bokstaver. La oss se hvordan vi kan bruke alle disse konseptene sammen for å skape den vibrerende HALLO tekst i den følgende demonstrasjonen.
Her er koden som ble brukt til å opprette animasjonen ovenfor:
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, varighet: 50); var animateFontSize = KUTE.allFromTo (theLetters, fontSize: '2em', fontSize: '4em', offset: 100, varighet: 200, gjenta: 10, yoyo: true); var animateSkewing = KUTE.allTo (theLetters, skewX: -15, offset: 200, duration: 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, duration: 200); animateColor.chain (animateFontSize); animateFontSize.chain (animateSkewing); animateSkewing.chain (animateH, animateE, animateLA, animateLB, animateO); animateE.chain (lettersSqueezed); startButton.addEventListener ("klikk", funksjon () animateColor.start ();, false);Hvert brev av ordet er pakket inn i a span tag og har sin egen unike klasse. Den første tween animerer fargen på alle bokstavene fra hvitt til rødt med en offset på 200ms. Dette er også den første animasjonen som spilles etter å ha klikket på Start animasjon. De animateFontSize Tween har blitt koblet til animateColor. På denne måten, skriftstørrelse animasjonen begynner så snart fargen animasjonen slutter.
Du har kanskje lagt merke til at jeg har brukt to attributter som heter gjenta og yoyo å kontrollere animasjonens oppførsel. De yoyo Attributt brukes til å reversere animasjonen som nå spilles gjentatte ganger. Dette kan unngå plutselige hopp i verdiene av forskjellige egenskaper under animasjonen, og få det til å virke jevnt.
De skriftstørrelse animasjon har blitt koblet sammen med animateSkewing, som skiller alle bokstavene med -15 grader. De skewX og skewY Egenskaper er tilgjengelige i selve kjernemotoren.
Alle tweens for å animere fargen på forskjellige bokstaver har blitt koblet til animateSkewing samtidig. På denne måten kan du forsikre deg om at alle de kjedede farg animasjonene begynner å spille så snart skrå animasjonen slutter. Endelig, den lettersSqueezed tween reduserer avstanden mellom forskjellige bokstaver med 15 px.
Du kan skape mer interessante effekter ved å bruke forskjellige kombinasjoner av egenskaper.
Du kan også animere tall i KUTE.js. Du må imidlertid inkludere et ekstra tekstplugin for å lage animasjonen.
Prosessen med å animere tall er faktisk veldig enkel. Du trenger bare å spesifisere väljeren der animasjonsnumrene skal vises, samt det endelige nummeret som animasjonen skal avslutte.
Her er et grunnleggende eksempel som viser totalt antall flyplasser i USA i 2016 ved hjelp av animasjon.
var usa = document.querySelector (". usa"); var startButton = document.querySelector ("start"); var animateUSA = KUTE.to (USA, nummer: 19536); startButton.addEventListener ("klikk", funksjon () animateUSA.start ();, false); Du kan også bruke de vanlige mellomalternativene som varighet, gjenta, og utsette å tilpasse animasjonens oppførsel. Koden vi nettopp skrev vil resultere i følgende animasjon:
Dette er en veldig populær effekt som du finner på ganske mange nettsteder. KUTE.js tekst plugin lar deg spesifisere den nye setningen som skal erstatte den opprinnelige setningen ett tegn om gangen.
Før du erstatter de innledende tegnene med den endelige verdien, blir tilfeldige tegn animert som talleksemplet du nettopp så. Den innebygde CodePen-demoen bør gjøre det tydeligere:
Her er koden du trenger å skrive for å opprette animasjonen ovenfor:
var animateHeading = KUTE.to (overskrift, text: '70% Overflaten på jorden er dekket med vann. ', varighet: 5000); startButton.addEventListener ("klikk", funksjon () animateHeading.start ();, false);Tegneanimasjonen for hele setningen er ferdig innen 5 sekunder. Som du kanskje har lagt merke til, trenger ikke de første og siste setningene å ha samme antall tegn. Dette gir oss mye frihet når du setter inn verdien av tekst parameter.
Du kan også inkludere HTML-koder inne i verdien av tekst parameter og bruk deretter CSS for å endre utseendet til teksten du bare animerte.
var animateHeading = KUTE.to (overskrift, text: '70% SURFACE OF JORD ER DEKKET MED VANN.', varighet: 10000, tekstKjerne:' øvre ');
Det vil bli en forsinkelse i utseendet til Jord etter av har allerede dukket opp. Dette skjer fordi plugin også skriver bruker samme tegnanimasjon, men ingen av disse tegnene er faktisk synlige for brukeren. Forsinkelsen kan eller ikke være ønskelig basert på dine preferanser.
Mellomtekstene som vises under animasjonen er som standard alfabetiske bokstaver. Dette kan være et problem når tegnene du vil animere, er alle store bokstaver eller tall. Hvilke mellomliggende tegn som brukes til animasjonen, bestemmes av verdien av textChars parameter. Den aksepterer seks forskjellige verdier:
alfa: I dette tilfellet vil mellomtegnene være små bokstaver.øverste: I dette tilfellet vil mellomtegnene være store bokstaver.numerisk: I dette tilfellet brukes numeriske tegn til animasjonen. Dette er forskjellig fra å animere et tall da verdiene ikke vil øke i rekkefølge.symboler: I dette tilfellet vil plugin bruke tegn som #,% og $ for animasjonene.alle: Du kan bruke denne verdien hvis du vil at mellommennene skal være en blanding av alfabetiske, numeriske og symboler.Følgende eksempel viser hvordan du kan animere tekst i en overskrift ved hjelp av store mellomliggende tegn.
I denne opplæringen lærte du hvordan du bruker CSS og Text plugins i KUTE.js for å animere teksten i et element. Når du vil animere utseendet på teksten, må du bruke CSS plugin. Dette vil tillate deg å bruke egenskaper som skriftstørrelse, avstand mellom bokstavene, etc. Når du vil endre de faktiske tegnene i et hvilket som helst element, må du bruke tekstpluggen.
Hvis du leter etter flere JavaScript-ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato Market.
Jeg håper du har lært noe nytt i denne opplæringen. Hvis du har spørsmål, vennligst gi meg beskjed i kommentarene.
