Share
Dans le deuxième tutoriel de cette série, vous avez appris à animer différentes propriétés CSS des éléments d’une page Web à l’aide de KUTE.js. Vous avez appris à animer toutes les propriétés de transformation ainsi que des propriétés telles que rayon de la frontière et couleur de la bordure. Vous pouvez également utiliser le plugin CSS pour animer des propriétés CSS telles que taille de police, hauteur de la ligne, l'espacement des lettres, et espacement des mots.
KUTE.js possède également un plugin Text qui vous permet d’animer le texte à l’intérieur de différents éléments, en augmentant ou en diminuant un nombre comme dans un compte à rebours ou en écrivant une chaîne caractère par caractère..
Dans ce didacticiel, vous apprendrez à animer le texte contenu dans différents éléments d’une page Web à l’aide des plugins CSS et Text de KUTE.js..
Comme je l'ai mentionné précédemment, vous pouvez utiliser le plugin CSS KUTE.js pour animer quatre propriétés CSS liées au texte différentes. Ces propriétés sont taille de police, hauteur de la ligne, l'espacement des lettres, et espacement des mots. Nous allons également utiliser certaines propriétés du moteur principal abordées dans le premier tutoriel pour animer des lettres individuelles. Voyons comment nous pouvons utiliser tous ces concepts ensemble pour créer le vibreur BONJOUR texte dans la démo suivante.
Voici le code qui a été utilisé pour créer l'animation ci-dessus:
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, durée: 50); var animateFontSize = KUTE.allFromTo (theLetters, fontSize: '2em', fontSize: '4em', offset: 100, durée: 200, répéter: 10, yoyo: true); var animateSkewing = KUTE.allTo (theLetters, skewX: -15, offset: 200, durée: 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, durée: 200); animateColor.chain (animateFontSize); animateFontSize.chain (animateSkewing); animateSkewing.chain (animateH, animateE, animateLA, animateLB, animateO); animateE.chain (lettersSqueezed); startButton.addEventListener ("clic", fonction () animateColor.start ();, false);Chaque lettre du mot est enveloppée dans un envergure tag et a sa propre classe unique. La première interpolation anime la couleur de toutes les lettres du blanc au rouge avec un décalage de 200 ms. C’est aussi la première animation qui se joue après avoir cliqué sur Lancer l'animation. le animateFontSize tween a été enchaîné à animateColor. De cette façon, le taille de police l'animation commence dès la fin de l'animation couleur.
Vous avez peut-être remarqué que j'ai utilisé deux attributs appelés répéter et yo-yo contrôler le comportement de l'animation. le yo-yo Cet attribut est utilisé pour inverser l'animation en cours de lecture répétée. Cela peut éviter des sauts soudains dans les valeurs de propriétés différentes lors de l'animation et lui donner un aspect lisse.
le taille de police l'animation a été enchaînée avec animer, qui incline toutes les lettres de -15 degrés. le skewX et pince les propriétés sont disponibles dans le moteur principal lui-même.
Tous les tweens pour animer la couleur de différentes lettres ont été enchaînés à animer immediatement. De cette façon, vous pouvez vous assurer que toutes les animations de couleurs chaînées commencent à jouer dès la fin de l'animation oblique. Finalement, le lettres écrasées tween réduit l'espacement entre les différentes lettres de 15 px.
Vous pouvez créer des effets plus intéressants en utilisant différentes combinaisons de propriétés..
Vous pouvez également animer des nombres dans KUTE.js. Cependant, vous devrez inclure un plugin texte supplémentaire pour créer l'animation.
Le processus d'animation des nombres est en réalité très simple. Il vous suffit de spécifier le sélecteur où les numéros animés doivent être affichés ainsi que le dernier numéro auquel l'animation doit se terminer..
Voici un exemple de base montrant le nombre total d'aéroports aux États-Unis en 2016 utilisant l'animation.
var usa = document.querySelector (". usa"); var startButton = document.querySelector (". start"); var animateUSA = KUTE.to (usa, numéro: 19536); startButton.addEventListener ("clic", fonction () animateUSA.start ();, false); Vous pouvez également appliquer les options d’interpolation habituelles telles que durée, répéter, et retard personnaliser le comportement de l'animation. Le code que nous venons d'écrire donnera l'animation suivante:
C'est un effet très populaire que vous pouvez trouver sur de nombreux sites Web. Le plug-in de texte KUTE.js vous permet de spécifier la nouvelle phrase devant remplacer la phrase d'origine, caractère par caractère..
Avant de remplacer les caractères initiaux par leur valeur finale, les caractères aléatoires s'animent comme les exemples de nombres que vous venez de voir. La démo intégrée de CodePen devrait préciser:
Voici le code que vous devez écrire pour créer l'animation ci-dessus:
var animateHeading = KUTE.to (titre, texte: '70% la surface de la terre est recouverte d'eau.', durée: 5000); startButton.addEventListener ("click", function () animateHeading.start ();, false);L'animation du personnage pour toute la phrase est terminée dans les 5 secondes. Comme vous l'avez peut-être remarqué, les phrases initiales et finales n'ont pas besoin d'avoir le même nombre de caractères. Cela nous laisse beaucoup de liberté pour définir la valeur du texte paramètre.
Vous pouvez également inclure des balises HTML dans la valeur de texte paramètre, puis utilisez CSS pour changer l'apparence du texte que vous venez d'animer.
var animateHeading = KUTE.to (titre, texte: '70% SURFACE DE TERRE Est recouvert de EAU.', duration: 10000, textChars:' upper ');
Il y aura un retard dans l'apparition de Terre après de est déjà apparu. Cela se produit parce que le plugin écrit aussi en utilisant la même animation de personnage, mais aucun de ces caractères n'est réellement visible par l'utilisateur. Le délai peut être ou ne pas être souhaitable en fonction de vos préférences.
Les caractères intermédiaires affichés lors de l'animation sont des valeurs alphabétiques minuscules par défaut. Cela peut être un problème lorsque les caractères que vous souhaitez animer sont des lettres majuscules ou des chiffres. Les caractères intermédiaires utilisés pour l’animation sont déterminés par la valeur de la textChars paramètre. Il accepte six valeurs différentes:
alpha: Dans ce cas, les caractères intermédiaires seront des lettres minuscules.plus haut: Dans ce cas, les caractères intermédiaires seront des lettres majuscules.numérique: Dans ce cas, des caractères numériques sont utilisés pour l'animation. C'est différent d'animer un nombre car les valeurs n'augmenteront pas séquentiellement.des symboles: Dans ce cas, le plugin utilisera des caractères tels que #,% et $ pour les animations.tout: Vous pouvez utiliser cette valeur si vous voulez que les caractères intermédiaires soient un mélange d’alphabet, de chiffres et de symboles.L'exemple suivant montre comment animer du texte dans un en-tête à l'aide de caractères intermédiaires majuscules.
Dans ce didacticiel, vous avez appris à utiliser les plug-ins CSS et Text dans KUTE.js pour animer le texte contenu dans un élément. Lorsque vous souhaitez animer l'apparence du texte, vous devez utiliser le plugin CSS. Cela vous permettra d'utiliser des propriétés comme taille de police, l'espacement des lettres, etc. Quand vous voulez changer les caractères actuels dans n'importe quel élément, vous devez utiliser le plugin text.
Si vous recherchez des ressources JavaScript supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur Envato Market..
J'espère que vous avez appris quelque chose de nouveau dans ce tutoriel. Si vous avez des questions, s'il vous plaît laissez-moi savoir dans les commentaires.
