Cuando clickamos el menú de hamburguesa de divi en móviles éste se despliega hacia abajo y podemos ver sus elementos, esa animación se ve genial.
Hoy vamos a hacerlo aún más dinámico añadiendo una animación a cada elemento del menú cuando éstos aparecen. Nos quedarán moviéndose a la izquierda uno después de otro en cascada. Se verá super genial.
Aquí abajo hay una vista previa:
Hoy vamos a hacerlo aún más dinámico añadiendo una animación a cada elemento del menú cuando éstos aparecen. Nos quedarán moviéndose a la izquierda uno después de otro en cascada. Se verá super genial.
Aquí abajo hay una vista previa:
Empecemos a agregar la animación en el menú Divi
Lo que tenemos que hacer es copiar y pegar el siguiente código en cualquier editor de css de Divi. De preferencia el general que aparece en Divi>Opciones del tema.
Gracias por suscribirte!
IMPORTANTE – Se te ha enviado un correo de confirmación. Revisa tu bandeja de entrada. Por favor confirma tu correo para poder enviarte nuevos tutoriales, artículos, códigos, recursos y comunicarnos directamente 🙂
@keyframes movevic {
0% {
transform:translatex(50%);
opacity:0;
}
100% {
transform:translatex(0px);
opacity:1;
}
}
.mobile_nav.opened ul li:nth-child(1) a{
animation-name:movevic;
animation-duration: 400ms;
animation-delay: 50ms;
animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(2) a{
animation-name:movevic;
animation-duration: 400ms;
animation-delay: 100ms;
animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(3) a{
animation-name:movevic;
animation-duration: 400ms;
animation-delay: 150ms;
animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(4) a{
animation-name:movevic;
animation-duration: 400ms;
animation-delay: 200ms;
animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(5) a{
animation-name:movevic;
animation-duration: 400ms;
animation-delay: 250ms;
animation-timing-function: ease-in-out;
}
.mobile_nav.opened ul li:nth-child(6) a{
animation-name:movevic;
animation-duration: 400ms;
animation-delay: 300ms;
animation-timing-function: ease-in-out;
}
Puedes notar que en el código hay 6 de éstos: nth-child(1), nth-child(2) , nth-child(3) , etc. Eso quiere decir que se está aplicando solamente a 6 elementos del menú. Si tienes un menú con más elementos simplemente le agregas más de éstos según necesites:
Gracias por suscribirte!
IMPORTANTE – Se te ha enviado un correo de confirmación. Revisa tu bandeja de entrada. Por favor confirma tu correo para poder enviarte nuevos tutoriales, artículos, códigos, recursos y comunicarnos directamente 🙂
.mobile_nav.opened ul li:nth-child(7) a{
animation-name:movevic;
animation-duration: 400ms;
animation-delay: 350ms;
animation-timing-function: ease-in-out;
}
Si te das cuenta la propiedad animation-delay siempre va aumentando 50ms.
Entonces si agregas un nth-child(7) su animation delay será 350ms, si agregas un nth-child(8) su animation-delay será 400ms, si agregas un nth-child(9) su animation delay será 450ms, etc.
Puedes agregar todos los que necesites.
Entonces si agregas un nth-child(7) su animation delay será 350ms, si agregas un nth-child(8) su animation-delay será 400ms, si agregas un nth-child(9) su animation delay será 450ms, etc.
Puedes agregar todos los que necesites.
0 comentarios