Hoy veremos un efecto de animación de desplazamiento de texto, que emula el de los banners publicitarios o el de las barras de texto que aparecen en la parte inferior de la pantalla de los noticieros.
Este es un ejemplo de cómo quedará el efecto de animación text marquee que vamos a implementar en el módulo texto del tema Divi
Es un efecto llamado text marquee. Hoy vamos a aprender a implementarlo muy fácilmente en el módulo texto del tema Divi. Como siempre, en solo un par de pasos…
Licencia Tema Divi
Ya sabes lo fabuloso que es el tema Divi. Si aún no lo tienes instalado en tu WordPress ,o lo tienes pero sin licencia, date una vuelta por nuestro servicio de activación de licencias para 1 sitio. Ofrecemos activación de licencias del tema Divi propiamente, así como de algunos plugins para Divi a excelentes precios.
Y si eres miembro premium, recibes un descuento adicional. 😉
¡Vuélvete un miembro VIP!
Accede a la descarga de Plugins Premium, 20% de descuento en activación de licencias y acceso a los tutoriales premium, volviéndote un miembro VIP
Animación Text Marquee o de desplazamiento de texto tipo marquesina
Él término viene de las marquesinas de los teatros, que eran esos carteles dónde se colocaban los títulos de la obra que se presentaba. Es decir, es un cartel que muestra información.
En diseño web nos referimos al efecto de movimiento del texto, tipo noticiero. Puede usarse como llamativos avisos dentro de tu web o tienda. El sitio web de Desigogthings, por ejemplo, utiliza éste efecto en sus elementos principales.
Menos Charla y más Acción, empecemos
En éste caso voy a hacer el ejercicio en un módulo texto con el mensaje: APROVECHA LA OFERTA LIMITADA
PASO 1: Agregando la clase
Lo primero que haremos será agregar la clase vic-marquee al módulo texto en cuestión.
Si te está gustando el artículo, éstos otros te van a encantar:
PASO 2: Agregando el código que hará la magia
Ahora, vamos a agregar un módulo código, y vamos a pegar en él, el fragmento de código que encontrarán más abajo
Código para copiar y pegar:
Contenido Gratuito bloqueado
Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:
Debería quedarte de ésta forma:
Mira nuestro último artículo:
Velocidad de la animación
Si desean modificar la velocidad de la animación, simplemente deberán editar la parte del código que dice: animation-duration: 10000ms; y cambiar ese valor numérico.
Si disminuyen la cantidad, la animación será más rápida. Si la aumentan, la animación será más lenta.
Y eso sería todo, ahora sólo sería cuestión que jueguen con los estilos del fondo y el texto, y eso lo pueden hacer fácilmente con los controles de la pestaña diseño del módulo texto, como cualquier módulo de Divi.
APROVECHA LA OFERTA LIMITADA
APROVECHA LA OFERTA LIMITADA
APROVECHA LA OFERTA LIMITADA
APROVECHA LA OFERTA LIMITADA
APROVECHA LA OFERTA LIMITADA
excelente proyecto
Me gustaría saber cómo hacer para que el texto con el efecto apareciera directamente en la pantalla y comenzara a moverse, en lugar de que fuera apareciendo poco a poco de derecha a izquierda.
Gracias!
Hola amigo, sólo elimina ésta línea del código: padding-left: 100%;
Saludos