Animación del logo y el menu principal con DIVI

por | May 18, 2018 | CSS, DIVI (Elegant Themes), Tutoriales

Como sabemos, DIVI trae un montón de animaciones que se pueden aplicar a todos los módulos. Pero hay ciertos elementos que de momento no nos permite animar.

Un caso de esto sería por ejemplo si quisiéramos que nuestro logo apareciera agrandándose y que el menú apareciera desde fuera del diseño hacia la izquierda.

Esto se realiza mediante los keyframe, que son la regla css que permite realizar animaciones, ya sea zoom, traslados, opacidad…

Vamos a realizar los efectos que he mencionado arriba.

Comenzamos con el logo.

Lo primero que debemos hacer es declarar el nombre de la animación y la transformación que esta va a hacer. Trasladado a código CSS este sería la declaración:

/* Aqui le damos el nombre que tendrá la animación, en este caso le he puesto “logo” */
@keyframes logo {
from {transform: scale(0);}
to {transform: scale(1);}
}

Este código quiere decir que pasará de un tamaño 0 a un tamaño 1 (el 100% del logo).

Postiormente, le añadiremos a la id logo, que es la que usa el elemento logo (valga la redundancia) la animación que hemos creado. Le he puesto una duración de 2s (2segundos). Este valor lo podéis cambiar a vuestro gusto.

/* Aqui asignamos la animación logo a la id logo (#logo)*/
#logo {
animation-name: logo;
animation-duration: 2s;
}

Resumiento, este sería el código que habría que copiar a vuestro CSS personalizado:

/* Aqui le damos el nombre que tendrá la animación, en este caso le he puesto “logo” */
@keyframes logo {
from {transform: scale(0);}
to {transform: scale(1);}
}
/* Aqui asignamos la animación logo a la id logo (#logo)*/
#logo {
animation-name: logo;
animation-duration: 2s;
}

Ahora es el turno del menú.

En lo que al menú se trata, el código es muy parecido, en este caso la animación se llama “menú” y vamos a hacer que se traslade en el eje x 500px de derecha hasta su posición original que es 0.
Este código esta asignado a la id top-menu-nav que es la que tiene el menú DIVI por defecto.

@keyframes menu {
from {transform: translateX(500px);}
to {transform: translateX(0px);}
}

#top-menu-nav {
animation-name: menu;
animation-duration: 2s;
}

Para saber que clase o id utiliza cada elemento, podéis remitiros a mi post Conoce que clase o id modificar con CSS

Aquí os dejo todo el código junto por si os interesa utilizarlo:

/* Aqui le damos el nombre que tendrá la animación, en este caso le he puesto “logo” */
@keyframes logo {
from {transform: scale(0);}
to {transform: scale(1);}
}
/* Aqui asignamos la animación logo a la id logo (#logo)*/
#logo {
animation-name: logo;
animation-duration: 2s;
}

@keyframes menu {
from {transform: translateX(500px);}
to {transform: translateX(0px);}
}

#top-menu-nav {
animation-name: menu;
animation-duration: 2s;
}

El ejemplo de estos efectos los podéis ver en esta misma página, pulsad f5 para ver como se animan tanto el menu como el logo.

Bueno, espero que le saquéis provecho a este truco y si os gusta, no olvidéis compartir.

Share This
A %d blogueros les gusta esto: