Share
En el segundo tutorial de esta serie, aprendió cómo animar diferentes propiedades CSS de los elementos en una página web usando KUTE.js. Aprendió cómo animar todas las propiedades de transformación, así como propiedades como radio del borde y color del borde. También puedes usar el complemento CSS para animar propiedades CSS como tamaño de fuente, altura de la línea, espaciado de letras, y espaciado de palabras.
KUTE.js también tiene un complemento de texto que le permite animar el texto dentro de diferentes elementos, ya sea aumentando o disminuyendo un número como en una cuenta regresiva o escribiendo una cadena de caracteres por carácter.
En este tutorial, aprenderá cómo animar el texto dentro de diferentes elementos en una página web usando los complementos de CSS y texto en KUTE.js.
Como mencioné anteriormente, puedes usar el complemento KUTE.js de CSS para animar cuatro propiedades CSS relacionadas con el texto. Estas propiedades son tamaño de fuente, altura de la línea, espaciado de letras, y espaciado de palabras. También utilizaremos algunas propiedades del motor central que se analizó en el primer tutorial para animar letras individuales. Veamos cómo podemos usar todos estos conceptos juntos para crear la vibración. HOLA texto en la siguiente demo.
Aquí está el código que se utilizó para crear la animación anterior:
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, repetir: 10, yoyo: true); var animateSkewing = KUTE.allTo (theLetters, skewX: -15, offset: 200, duración: 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 ("click", function () animateColor.start ();, false);Cada letra de la palabra está envuelta dentro de un lapso Etiqueta y tiene su propia clase única. La primera interpolación anima el color de todas las letras de blanco a rojo con un desplazamiento de 200 ms. Esta es también la primera animación que se reproduce después de hacer clic en Iniciar animacion. los animateFontSize Tween ha sido encadenado a animateColor. De esta manera, el tamaño de fuente La animación comienza tan pronto como termina la animación en color..
Es posible que hayas notado que he usado dos atributos llamados repetir y yoyó Controlar el comportamiento de la animación. los yoyó atributo se utiliza para revertir la animación que se está reproduciendo en repetidas ocasiones. Esto puede evitar saltos repentinos en los valores de diferentes propiedades durante la animación y hacer que parezca suave.
los tamaño de fuente la animación ha sido encadenada con animateSkewing, que sesga todas las letras por -15 grados. los skewX y sesgado Las propiedades están disponibles dentro del motor central..
Todas las interpolaciones para animar el color de diferentes letras se han encadenado a animateSkewing En seguida. De esta manera, puede asegurarse de que todas las animaciones de color encadenadas comiencen a reproducirse tan pronto como finalice la animación sesgada. Finalmente, el cartas exprimidas la interpolación reduce el espaciado entre diferentes letras en 15 px.
Puedes crear efectos más interesantes usando diferentes combinaciones de propiedades.
También puedes animar números en KUTE.js. Sin embargo, tendrá que incluir un complemento de texto adicional para crear la animación..
El proceso de animación de números es en realidad muy simple. Solo tiene que especificar el selector donde deben mostrarse los números animados, así como el número final en el que debe terminar la animación..
Este es un ejemplo básico que muestra la cantidad total de aeropuertos en los EE. UU. En 2016 con animación.
var usa = document.querySelector (". usa"); var startButton = document.querySelector (". start"); var animateUSA = KUTE.to (usa, número: 19536); startButton.addEventListener ("click", function () animateUSA.start ();, false); También puede aplicar las opciones de interpolación habituales como duración, repetir, y retrasar Para personalizar el comportamiento de la animación. El código que acabamos de escribir resultará en la siguiente animación:
Este es un efecto muy popular que puede encontrar en bastantes sitios web. El complemento de texto KUTE.js le permite especificar la nueva oración que debe reemplazar la oración original un carácter a la vez.
Antes de reemplazar los caracteres iniciales con su valor final, los caracteres aleatorios se animan como los ejemplos que acaba de ver. La demostración incrustada de CodePen debería dejarlo más claro:
Aquí está el código que necesita escribir para crear la animación anterior:
var animateHeading = KUTE.to (encabezado, texto: '70% La superficie de la Tierra está cubierta con agua. ', duración: 5000); startButton.addEventListener ("click", function () animateHeading.start ();, false);La animación del personaje para toda la oración se termina en 5 segundos. Como habrás notado, las oraciones iniciales y finales no necesitan tener el mismo número de caracteres. Esto nos da mucha libertad al establecer el valor de la texto parámetro.
También puede incluir etiquetas HTML dentro del valor del texto parámetro y luego use CSS para cambiar la apariencia del texto que acaba de animar.
var animateHeading = KUTE.to (encabezado, texto: '70% SUPERFICIE DE TIERRA ESTÁ CUBIERTO CON AGUA.', duration: 10000, textChars:' upper ');
Habrá un retraso en la aparición de Tierra después de ya ha aparecido Esto sucede porque el plugin también escribe utilizando la misma animación de caracteres, pero ninguno de ellos es realmente visible para el usuario. El retraso puede o no ser deseable en función de sus preferencias.
Los caracteres intermedios que se muestran durante la animación son valores alfabéticos en minúsculas de forma predeterminada. Esto puede ser un problema cuando los caracteres que desea animar son letras o números en mayúsculas. Los caracteres intermedios que se utilizan para la animación están determinados por el valor de textChars parámetro. Acepta seis valores diferentes:
alfa: En este caso, los caracteres intermedios serán letras minúsculas..Superior: En este caso, los caracteres intermedios serán letras mayúsculas..numérico: En este caso, se utilizan caracteres numéricos para la animación. Esto es diferente de animar un número ya que los valores no aumentarán secuencialmente.simbolos: En este caso, el complemento utilizará caracteres como #,% y $ para las animaciones.todos: Puede utilizar este valor si desea que los caracteres intermedios sean una combinación de caracteres alfabéticos, numéricos y símbolos.El siguiente ejemplo muestra cómo puede animar texto dentro de un encabezado usando caracteres intermedios en mayúsculas.
En este tutorial, aprendió a usar los complementos de CSS y texto en KUTE.js para animar el texto dentro de un elemento. Cuando desee animar la apariencia del texto, debe usar el complemento CSS. Esto te permitirá usar propiedades como tamaño de fuente, espaciado de letras, Cuando desee cambiar los caracteres reales dentro de cualquier elemento, necesita usar el complemento de texto.
Si está buscando recursos de JavaScript adicionales para estudiar o usar en su trabajo, consulte lo que tenemos disponible en Envato Market.
Espero que hayas aprendido algo nuevo en este tutorial. Si tiene alguna pregunta, por favor hágamelo saber en los comentarios..
