Share
I den andra handledningen i den här serien lärde du dig att animera olika CSS-egenskaper hos elementen på en webbsida med KUTE.js. Du lärde dig hur man animerar alla transformationsegenskaper såväl som egenskaper som border-radius och gräns färg. Du kan också använda CSS-plugin för att animera CSS-egenskaper som textstorlek, radavstånd, teckenavstånd, och word-avstånd.
KUTE.js har också ett Text-plugin som låter dig animera texten inuti olika element, antingen genom att öka eller minska ett tal som i en nedräkning eller genom att skriva ett strängtecken efter karaktär.
I denna handledning lär du dig att animera texten i olika element på en webbsida med hjälp av CSS och Text plugins i KUTE.js.
Som jag nämnde tidigare kan du använda KUTE.js CSS-plugin för att animera fyra olika textrelaterade CSS-egenskaper. Dessa egenskaper är textstorlek, radavstånd, teckenavstånd, och word-avstånd. Vi kommer också att använda några egenskaper från kärnmotorn som diskuteras i den första handledningen för att animera enskilda bokstäver. Låt oss se hur vi kan använda alla dessa begrepp tillsammans för att skapa vibrerande HEJ text i följande demo.
Här är koden som användes för att skapa animationen ovan:
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 (". Ib"); var o = document.querySelector (". o"); var startButton = document.querySelector ("start"); var animateColor = KUTE.allFromTo (deLetters, color: 'white', color: 'red', offset: 200, duration: 50); var animateFontSize = KUTE.allFromTo (theLetters, fontSize: '2em', fontSize: '4em', offset: 100, duration: 200, repeat: 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, färg: '# E91E63'); var animateLA = KUTE.to (la, färg: '# 8BC34A'); var animateLB = KUTE.to (lb, translateY: 20, färg: '# 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 ("klicka", funktion () animateColor.start ();, false);Varje bokstav av ordet är insvept inuti a spänna tagg och har sin egen unika klass. Den första tweenen animerar färgen på alla bokstäverna från vit till röd med en offset på 200ms. Detta är också den första animationen som spelas efter att ha klickat på Start Animation. De animateFontSize Tween har varit kedjad till animateColor. På så sätt, textstorlek animering börjar så snart färganimeringen slutar.
Du kanske har märkt att jag har använt två attribut som heter upprepa och jojo för att styra animationens beteende. De jojo Attribut används för att vända om den animering som spelas upprepade gånger. Detta kan undvika plötsliga hopp i värdena för olika egenskaper under animeringen och göra det verkar smidigt.
De textstorlek animering har varit kedjad med animateSkewing, som skiljer alla bokstäverna med -15 grader. De skewX och skewY Egenskaper finns inom själva kärnmotorn.
Alla tweens för att animera färgen på olika bokstäver har knyts till animateSkewing genast. På det här sättet kan du se till att alla kedjiga färganimationer börjar spela så fort skew animationen slutar. Slutligen, den lettersSqueezed Tween minskar avståndet mellan olika bokstäver med 15 px.
Du kan skapa mer intressanta effekter genom att använda olika kombinationer av egenskaper.
Du kan också animera siffror i KUTE.js. Du måste dock inkludera ett extra text plugin för att skapa animationen.
Processen med att animera siffror är faktiskt mycket enkel. Du behöver bara ange väljaren där animeringsnumren ska visas samt det slutliga numret där animationen ska sluta.
Här är ett grundläggande exempel som visar totalt antal flygplatser i USA år 2016 med animering.
var usa = document.querySelector ("usa"); var startButton = document.querySelector ("start"); var animateUSA = KUTE.to (USA, nummer: 19536); startButton.addEventListener ("klicka", funktion () animateUSA.start ();, false); Du kan också använda de vanliga mellanalternativen som varaktighet, upprepa, och fördröjning för att anpassa animationens beteende. Koden som vi just skrev kommer att resultera i följande animering:
Detta är en mycket populär effekt som du kan hitta på en hel del webbplatser. Text plugin KUTE.js låter dig ange den nya meningen som ska ersätta den ursprungliga meningen ett tecken åt gången.
Innan du ersätter de ursprungliga bokstäverna med deras slutliga värde animeras de slumpmässiga tecknen som siffrorna som du just såg. Den inbäddade CodePen-demo ska göra det tydligare:
Här är koden som du behöver skriva för att skapa ovanstående animering:
var animateHeading = KUTE.to (rubrik, text: '70% Jordens yta är täckt med vatten. ', varaktighet: 5000); startButton.addEventListener ("klicka", funktion () animateHeading.start ();, false);Teckenanimationen för hela meningen är klar inom 5 sekunder. Som du kanske har märkt behöver de ursprungliga och sista meningarna inte ha samma antal tecken. Detta ger oss mycket frihet när vi ställer in värdet av text parameter.
Du kan också inkludera HTML-taggar inuti värdet av text parameter och använd sedan CSS för att ändra utseendet på texten som du bara animerade.
var animateHeading = KUTE.to (rubrik, text: '70% YTTRÄDE AV JORD Är täckt med VATTEN.', duration: 10000, textChars:' upper ');
Det kommer att bli en försening i utseendet på jord efter av har redan dykt upp. Detta händer eftersom plugin också skriver använder samma teckenanimering, men ingen av dessa tecken är faktiskt synliga för användaren. Förseningen kan eller inte är önskvärt baserat på dina önskemål.
De mellanliggande tecknen som visas under animeringen är som standard alfabetiska bokstäver. Det här kan vara ett problem när tecknen du vill animera är alla stora bokstäver eller siffror. Vilka mellanliggande tecken som används för animeringen bestäms av värdet av textChars parameter. Den accepterar sex olika värden:
alfa: I det här fallet kommer mellanliggande tecken att vara små bokstäver.övre: I det här fallet kommer mellanliggande tecken att vara stora bokstäver.numerisk: I detta fall används numeriska tecken för animeringen. Detta skiljer sig från att animera ett tal eftersom värdena inte ökar i följd.symboler: I det här fallet kommer plugin att använda tecken som #,% och $ för animeringarna.Allt: Du kan använda det här värdet om du vill att mellanliggande tecken ska vara en blandning av alfabetiska, numeriska och symboler.Följande exempel visar hur du kan animera text i en rubrik med hjälp av stora mellanliggande tecken.
I denna handledning lärde du dig hur du använder CSS och Text plugins i KUTE.js för att animera texten i ett element. När du vill animera textens utseende, måste du använda CSS-plugin. Det här låter dig använda egenskaper som textstorlek, teckenavstånd, etc. När du vill ändra de faktiska tecknen i något element måste du använda textinpluggen.
Om du letar efter ytterligare JavaScript-resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato Market.
Jag hoppas att du lärde dig något nytt i den här handledningen. Om du har några frågor, vänligen meddela mig det i kommentarerna.
