Share
In de tweede zelfstudie van deze serie hebt u geleerd hoe u verschillende CSS-eigenschappen van de elementen op een webpagina kunt animeren met KUTE.js. Je hebt geleerd om alle transformatie-eigenschappen en eigenschappen zoals te animeren border-radius en rand kleur. U kunt ook de CSS-plug-in gebruiken om CSS-eigenschappen zoals animeren lettertypegrootte, lijnhoogte, letterafstand, en word-spacing.
KUTE.js heeft ook een tekstinvoegtoepassing waarmee je de tekst in verschillende elementen kunt animeren, door een getal te verhogen of te verlagen zoals bij een aftelling of door een tekenreeks karakter voor teken te schrijven.
In deze zelfstudie leert u hoe u de tekst in verschillende elementen op een webpagina kunt animeren met behulp van de CSS- en Tekst-plug-ins in KUTE.js.
Zoals ik eerder al zei, kunt u de KUTE.js CSS-plug-in gebruiken om vier verschillende tekstgerelateerde CSS-eigenschappen te animeren. Deze eigenschappen zijn lettertypegrootte, lijnhoogte, letterafstand, en word-spacing. We zullen ook enkele eigenschappen van de kernmotor gebruiken die in de eerste tutorial zijn besproken om individuele letters te animeren. Laten we eens kijken hoe we al deze concepten samen kunnen gebruiken om het vibreren te creëren HALLO tekst in de volgende demo.
Hier is de code die werd gebruikt om de bovenstaande animatie te maken:
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, 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, 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 ("klik", functie () animateColor.start ();, false);Elke letter van het woord is ingepakt in een span tag en heeft zijn eigen unieke klasse. De eerste tween animeert de kleur van alle letters van wit naar rood met een offset van 200ms. Dit is ook de eerste animatie die wordt gespeeld nadat erop is geklikt Start animatie. De animateFontSize tween is vastgeketend aan animateColor. Op deze manier, de lettertypegrootte animatie begint zodra de kleuranimatie eindigt.
Je hebt misschien gemerkt dat ik twee attributen heb gebruikt die ik heb genoemd herhaling en yoyo om het gedrag van de animatie te regelen. De yoyo attribuut wordt gebruikt om de animatie die op dat moment wordt herhaald, om te keren. Hiermee kunt u plotse sprongen in de waarden van verschillende eigenschappen voorkomen tijdens de animatie en deze soepel laten lijken.
De lettertypegrootte animatie is geketend met animateSkewing, die alle letters scheef trekt met -15 graden. De skewX en skewY eigenschappen zijn beschikbaar binnen de kernmotor zelf.
Alle tweens voor het animeren van de kleur van verschillende letters zijn aan elkaar geketend animateSkewing onmiddelijk. Op deze manier kunt u ervoor zorgen dat alle gekoppelde kleurenanimaties worden afgespeeld zodra de scheefgetrokken animatie eindigt. eindelijk, de lettersSqueezed tween vermindert de spatiëring tussen verschillende letters met 15 px.
U kunt interessantere effecten maken door verschillende combinaties van eigenschappen te gebruiken.
Je kunt ook nummers animeren in KUTE.js. U moet echter een extra tekstinvoegtoepassing toevoegen om de animatie te maken.
Het proces van het animeren van getallen is eigenlijk heel eenvoudig. U hoeft alleen maar de selector op te geven waar de animatienummers moeten worden weergegeven, evenals het definitieve nummer waaraan de animatie moet eindigen.
Hier is een eenvoudig voorbeeld dat het totale aantal luchthavens in de VS in 2016 toont met behulp van animatie.
var usa = document.querySelector (". usa"); var startButton = document.querySelector (". start"); var animateUSA = KUTE.to (usa, number: 19536); startButton.addEventListener ("klik", functie () animateUSA.start ();, false); U kunt ook de gebruikelijke tween-opties toepassen zoals looptijd, herhaling, en vertraging om het gedrag van de animatie aan te passen. De code die we net hebben geschreven, resulteert in de volgende animatie:
Dit is een erg populair effect dat je op heel wat websites kunt vinden. Met de tekstinvoegtoepassing KUTE.js kunt u de nieuwe zin opgeven die de oorspronkelijke zin één teken per keer moet vervangen.
Voordat u de eerste tekens vervangt door hun uiteindelijke waarde, worden willekeurige tekens geanimeerd zoals het voorbeeld dat u net hebt gezien. De ingebedde CodePen-demo moet het duidelijker maken:
Hier is de code die je moet schrijven om de bovenstaande animatie te maken:
var animateHeading = KUTE.to (heading, text: '70% Surface of Earth is Covered with Water. ', duration: 5000); startButton.addEventListener ("click", function () animateHeading.start ();, false);De tekenanimatie voor de hele zin is binnen 5 seconden voltooid. Zoals je misschien al gemerkt hebt, hoeven de begin- en eindzinnen niet hetzelfde aantal karakters te hebben. Dit geeft ons veel vrijheid bij het bepalen van de waarde van de tekst parameter.
U kunt ook HTML-tags opnemen binnen de waarde van de tekst parameter en gebruik vervolgens CSS om het uiterlijk van de tekst te wijzigen die u zojuist hebt geanimeerd.
var animateHeading = KUTE.to (heading, text: '70% OPPERVLAKTE VAN AARDE IS BEHANDELD MET WATER.', duration: 10000, textChars:' upper ');
Er treedt een vertraging op in het uiterlijk van Aarde na van is al verschenen. Dit gebeurt omdat de plug-in ook schrijft dezelfde tekenanimatie gebruiken, maar geen van die tekens is daadwerkelijk zichtbaar voor de gebruiker. De vertraging kan al dan niet wenselijk zijn op basis van uw voorkeuren.
De tussenliggende tekens die tijdens de animatie worden getoond, zijn standaard standaard kleine alfabetische waarden. Dit kan een probleem zijn wanneer de tekens die u wilt animeren allemaal hoofdletters of cijfers zijn. Welke tussenpersonen worden gebruikt voor de animatie, wordt bepaald door de waarde van de textChars parameter. Het accepteert zes verschillende waarden:
alpha: In dit geval zijn de tussenletters kleine letters.bovenste: In dit geval zijn de tussenletters hoofdletters.numerieke: In dit geval worden numerieke tekens gebruikt voor de animatie. Dit verschilt van het animeren van een nummer omdat de waarden niet opeenvolgend toenemen.symbolen: In dit geval gebruikt de plug-in tekens als #,% en $ voor de animaties.allemaal: U kunt deze waarde gebruiken als u wilt dat de tussenliggende tekens een combinatie zijn van alfabetisch, numeriek en symbolen.In het volgende voorbeeld ziet u hoe u tekst in een kop kunt animeren met behulp van tussenliggende tekens in hoofdletters.
In deze zelfstudie leer je hoe je de CSS- en tekstplug-ins in KUTE.js gebruikt om de tekst in een element te animeren. Als u het uiterlijk van de tekst wilt animeren, moet u de CSS-plug-in gebruiken. Hiermee kunt u eigenschappen zoals gebruiken lettertypegrootte, letterafstand, enz. Als u de werkelijke tekens in een willekeurig element wilt wijzigen, moet u de tekstinvoegtoepassing gebruiken.
Als u op zoek bent naar aanvullende JavaScript-bronnen om te studeren of te gebruiken in uw werk, bekijk dan wat we beschikbaar hebben op Envato Market.
Ik hoop dat je in deze tutorial iets nieuws hebt geleerd. Als u vragen heeft, kunt u me dit laten weten in de opmerkingen.
