Animación del Color del Texto – Efecto Scroll Vertical con CSS en Elementor Pro

Cada vez son más frecuentes las animaciones en los sitios web que visitamos, es que no solo basta con tener una web que sea funcional, también necesitamos que sea atractiva y dinámica para nuestros visitantes, por tal razón estaré dejando una seria de efectos interesantes y fáciles de aplicar para aquellos tengan una web diseñada con el constructor visual de Elementor Pro. El primer Efecto de Scroll de esta seria tiene que ver con el cambio de color en las letras a medida que el usuario va navegando en nuestra web. Vamos ver una guía práctica donde aprenderá a aplicar este efecto de animación de texto y si no sabes nada de código, no te preocupes, solo debes copiar y pegar el código que aquí te dejo. ¡Comenzamos! Tutorial va dirigido a quienes tienen su web diseñada con elementor, sin embargo, los códigos sirven para otros constructores visuales, estos códigos no fueron escritos por mí, pero haré lo posible por explicar como usarlos y nos quedé un buen resultado. 1. Elije donde colocaremos el efecto. Abre la página web como administrador y elije la sección donde deseas colocar el efecto. 2. Crea una nueva sección Crea una sección dentro de la página escogida y dentro de ella incorpora el wigget de ENCABEZADO. 3. Escribe la palabra o frase a animar. Dentro del wigget de ENCABEZADO procedemos a escribir la palabra o frase a animar y procedemos a personalizarla en la sección de estilos donde podemos elegir el tipo de letra, grosor y altura de línea procurando de la palabra quede totalmente dentro del marco del encabezado para que no se corte el color del efecto (si llegas a 100% en altura de línea y aún no cubre la palabra completamente, coloca el porcentaje en un número mayor tipeando directamente en el campo de porcentaje. De preferencia estos efectos se ven excelentes en tipos de letras muy grandes y en bold. Te sugiero personalizar aplicando el responsive en el constructor visual ya que si tu texto tiene más de una línea el siguiente paso será mucho más sencillo. 4. Duplica cuantas veces sea necesario Si tu texto va a requerir más de una línea, duplica el primer encabezado ya personalizado las veces que lo necesites y reemplaza el texto. ¿Por qué no dejar un solo encabezado con todo el texto que necesitas? porque queremos que el efecto de scroll sea tipo cascada y que a medida vas bajando vaya apareciendo el resto, de lo contrario aparecerá todo el color de golpe y no se verá reflejado por línea. 5. Agrega el código que contiene el efecto Haz clic en el contenedor que tiene todos los encabezados (el contenedor global) y en la sección de configuración dirígete a la sección AVANZADO hasta el final donde aparece CUSTOM CSS y procede a pegar el siguiente código: ⚠️ Nota: Puede ocurrir que el color gris tenue cuando el texto se encuentra inactivo no se muestre, en caso de que este error ocurra aparecerá un símbolo de advertencia en la línea de código, esto se debe a que algunos constructores visuales hacen referencia al código RGB y otros lo tienen como RGBA. Para elementor ya está en RBGA. 6. Cambia los colores Cuando el texto aparece en OFF (sin el color) puedes cambiar la opacidad en la línea 2 del código donde cada valor representa lo siguiente: rgb(color, color, color, opacidad), siendo la opacidad mientras más cerca del valor 1 más oscuro el color y más cerca del valor 0 es más tenue. Lo ideal es dejarlo como está. Cuando el texto aparece en ON (con el color) puedes cambiar los códigos de cada color perteneciente al degradado (este efecto es un degradado de 3 u dos colores) haciendo clic en cada valor que comience con # en la línea 3 del código y reemplazando el número por el código perteneciente a tu color. TIP: Para tomar el código de color de una imagen o logo a. Consulta la paleta de colores de tu logo en RGB. Por lo general el diseñador del logo suele entregar una hoja de estilos como la de este ejemplo: b. usa el gotero de cualquier programa de edición y mira el código del color. Ya estamos terminando, vamos darle unos ajustes más y lo tendremos. 7. Agrega un wigget de HTML Debajo de los encabezados agrega un wigget de HTML con el siguiente código de javascript: No cambies ningún valor del código, excepto por las líneas 12 y 13 donde se indica en que punto de la pantalla inicia y termina la animación.Start: mientras más cerca de 100% más rápida aparece la animación.End: en 50% es el punto central de la pantalla donde termina la animación, mientras más cerca a 0% más demora en culminar el efecto. 8. Comprueba y guarda los cambios Te sugiero guardar los cambios y abrir la visualización de la página en una nueva pestaña para que compruebes como va quedando el resultado y hagas los ajustes que consideres necesarios hasta que quedé 100% a tu gusto. De igual forma no olvides mirar las letras en modo RESPONSIVE para adaptarlas a un tamaño legible en móvil y tablet sin que pierda el efecto. Espero este tutorial haya sido de gran ayuda para tí, si te ha gustado guardalo para consultarlo cuando gustes, cada vez que desees aplicar este efecto de animación de texto en scroll vertical.

Contacto

Cuéntame como Puedo apoyarte