3 Efectos de rollover sobre iconos en Divi

por | 2 Abr, 2017 | animacion, css, Divi | 9 comentarios

Crear pequeñas interacciones son una buena forma de mejorar la experiencia de usuario cuando interactúa con nuestro sitio web. Crear pequeñas animaciones que se activan al pasar el ratón por alguna zona dará un plus de entretenimiento a nuestro visitante. Y todo esto con un poco de CSS.

En este tutorial, inspirado en un post del blog de Elegant themes, vamos a aprender como hacer 3 efectos de rollover sobre el módulo anuncio de Divi.

Efectos de rollover Divi. 3 formas de animar

Divi viene con una biblioteca de iconos que puedes añadir a a tu sitio fácilmente con el módulo Anuncio (Blurb).  Si queremos llamar la atención sobre tu información, podemos animar el icono que aparece encima del contenido.

Veremos dos formas de activar la animación del icono. En este primer ejemplo, la animación del icono se activa cuando pasamos el cursor sobre el icono real. Los tipos de animación que veremos son girar, sacudir y escalar.

Lo primero que haremos será crear una página o entrada y activar Usar constructor Divi. Pulsa insertar columnas y selecciona 3 columnas. A continuación, inserta un módulo Anuncio en la primera columna.

configurar-modulo-anuncio

Los ajustes que debes hacer en el módulo serán los siguientes:

  • Pon un título, por ejemplo ROTAR ICONO
  • Introduce una URL (almohadilla, #, para este tutorial)
  • Usar icono: Sí, y elije uno
  • Color de icono: Dale un color a tu icono, yo he puesto #498bc1
  • Ubicación de la imagen o el icono: Superior
  • Animación de la imagen o el icono: Sin animación
  • Orientación del texto: Centro
  • Si quieres añadir contenido, introduce el texto que desees

Por supuesto, puedes configurar el módulo como te parezca, intenta nuevas formas de crear tu módulo.

Duplicando y configurando los módulos

Para aplicar los efectos vamos a referenciar la clase que vamos a crear para cada uno de ellos en las pestaña CSS personalizado de cada módulo anuncio. Así que pulsamos en la pestaña CSS personalizado del módulo y añadimos la clase rotar en el campo Clase CSS como ves en la imagen lo que activará la animación de rotación. Guarda tus cambios pulsando Guardar y salir.

css-modulo-anuncio

Antes de insertar nuestro código CSS , tenemos que configurar los dos siguientes módulos anuncio duplicando dos veces el que acabamos de crear y arrastrándolos a las dos columnas vacías.

duplicar.modulo-anuncio

Ahora cambiamos los ajustes de los nuevos módulos Anuncio. En el segundo modificamos el texto e icono y en CSS personalizado, en el campo Clase CSS, cambiamos la clase rotar por sacudir. Lo mismo en el tercer módulo, en esta ocasión la clase es escalar.

Añadir el código CSS

Una vez tenemos listos nuestros tres módulo de Anuncio, insertamos el código CSS. Podemos insertarlo en Divi > Opciones del Tema > nos desplazamos hacia abajo y pegamos el código en el campo CSS personalizado.

insertar-css-divi

También podemos añadir el código CSS directamente a la entrada o página, pulsando en ajustes de Divi Builder (imagen inferior) que es la opción que yo he elegido.

ajustes-css-divi-builder

Este es el código CSS que debes copiar.

.rotar .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.rotar .et-pb-icon:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.sacudir .et-pb-icon:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

.escalar .et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
} 

Aquí puedes ver el tutorial terminado:

 

ROTAR ICONO

Efecto girar cuando pases el ratón por el icono

SACUDIR ICONO

Efecto sacudir cuando pases el ratón por el icono

ESCALAR ICONO

Efecto escalar cuando pases el ratón por el icono

Si lo que quieres es que se ejecute el efecto cada vez que pases por cualquier parte de cada módulo, no sólo por el icono, sustituye el código CSS que habías pegado por éste:

.rotar .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.5s ease-out;
}
.rotar:hover .et-pb-icon {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.escalar:hover .et-pb-icon {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

.sacudir:hover .et-pb-icon {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes sacudir {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

Aquí puedes ver el tutorial terminado:

 

ROTAR ICONO

Efecto girar cuando pases el ratón por cualquier parte del módulo

SACUDIR ICONO

Efecto sacudir cuando pases el ratón por cualquier parte del módulo

ESCALAR ICONO

Efecto escalar cuando pases el ratón por cualquier parte del módulo