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, aprenderemos a implementarlo muy fácilmente en el módulo texto del tema Divi. Como siempre, el código para hacerlo lo encontrarán más abajo, sigue leyendo.
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, nuestros amigos de Rapihosting (Nuestra primera opción en Hosting para WordPress) te tienen la solución. Gracias a su servicio de activación de Licencias, te pueden instalar y agregar una licencia oficial lifetime de Divi a un súper precio. Así que, disfruta de Divi con total libertad.
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.
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
Para que puedan visualizar el snippet de éste tutorial, solo dejen su correo en el formulario de abajo y hagan click al botón: “Ver códigos”.
Y automáticamente serán visibles…
Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones y sorteos de productos de la sección de Recursos Premium. Además que tenemos una comunicación más directa para compartir y resolver dudas. 🙂
Gracias por solicitar suscribirte, pero aún falta un paso…
IMPORTANTE – ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver los códigos del tutorial debajo de éste mensaje
<style>
.vic-marquee{
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
}
.vic-marquee>div {
animation-name:vic-marquee;
/* Velocidad de la Animación */
animation-duration: 10000ms;
animation-timing-function: linear;
animation-iteration-count:infinite;
display:inline-block;
padding-left: 100%;
}
.vic-marquee:hover>div {
animation-play-state:paused;
}
@keyframes vic-marquee {
0% {
transform: translatex(0);
}
100% {
transform: translatex(-100%);
}
}
</style>
Debería quedarte de ésta forma:
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
Palabras Finales
No olvides darte una vuelta por mi sección de Recursos Premium, para ver nuestro Hosting WordPress recomendado, activación de licencias de productos Divi, y algunas plantillas y layouts listos para importar a Divi.
Regálame una estrellita más abajo y si tienes alguna duda comenta. Por cierto, más abajo también encontrarás más artículos con trucos para Divi que seguro también te encantarán. Nos vemos (¿leemos?), en el próximo artículo.
0 comentarios