La creación de una animación 3D dinámica del movimiento del mouse es una forma divertida y emocionante para que los usuarios interactúen con el contenido web en su sitio Divi . El diseño es dinámico en el sentido de que la animación se moverá con el cursor. Normalmente, animamos objetos al pasar el mouse o al hacer clic. Pero en este tutorial, vamos a presentar una forma creativa de animar objetos al mover el mouse (mover el cursor en varias ubicaciones en la ventana del navegador). Pero eso no es todo. También le mostraremos cómo combinar la animación del movimiento del mouse con un efecto de desplazamiento que hace que los elementos sobresalgan en un diseño 3D que le dará vida a su contenido de una manera completamente nueva.
Para construirlo, usaremos el constructor Divi para la mayor parte del diseño. Luego, usaremos CSS y JQuery personalizados para crear la funcionalidad de animación.
Una vez hecho esto, ¡tendrá un diseño impresionante para presentar nuevos productos o servicios en su próximo proyecto!
Empecemos.
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
También puede consultar este codepen para ver una demostración en vivo del efecto.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Creando un Efecto de Animación de Movimiento de Ratón 3D Dinámico en Divi
Parte 1: crear el contenedor flotante y la tarjeta con una fila y una columna
Para este efecto de animación, la fila será el objetivo que activa la animación 3d al pasar el mouse. Podemos llamar a esto el contenedor flotante. La columna servirá como nuestra tarjeta que se animará junto con sus elementos secundarios al pasar el cursor sobre la fila.
Pero antes de crear la fila y la columna, diseñemos la sección.
La sección
Para comenzar, abra la configuración de la sección regular predeterminada y actualice lo siguiente:
- Color de fondo: rgba(68,55,99,0.1)
- Acolchado: 7vh arriba, 7vh abajo
La fila (contenedor flotante)
Agregue una fila de una columna a la sección.
Configuración de fila
En la configuración de la fila, actualice lo siguiente:
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 70 % (escritorio), 60 % (tableta), 50 % (teléfono)
- Acolchado: 7vh, arriba, 7vh abajo, 5vw izquierda, 5vw derecha
NOTA: El truco aquí es crear una fila con suficiente espacio alrededor de la columna para que pueda activar la animación de movimiento del mouse de la tarjeta moviendo el cursor alrededor de toda el área de la fila (no la columna). De esta manera, puede tener más espacio para mover la tarjeta. También desea dejar suficiente espacio alrededor de la fila para que pueda mover el cursor fuera de la fila (hacia el espacio de la sección que rodea la fila) para desactivar la animación y permitir que los elementos de la tarjeta vuelvan a su lugar.
En la pestaña avanzada, asigne a la fila una clase personalizada:
- Clase CSS: et-hover-contenedor
Luego agregue el siguiente CSS al elemento principal:
|
01
02
03
|
display:flex;align-items:center;justify-content:center; |
Este pequeño fragmento mantiene la columna centrada vertical y horizontalmente dentro de la fila (necesario porque vamos a darle a nuestra columna un ancho máximo establecido).
La columna (o tarjeta)
Después de actualizar la fila, abra la configuración de la columna para crear el estilo de nuestra tarjeta de la siguiente manera:
- Color de fondo: #ffffff
- Relleno: 7vh arriba, 7vh abajo, 5% izquierda, 5% derecha
- Esquinas redondeadas: 30px
- Sombra de caja: ver captura de pantalla
- Posición vertical de la sombra del cuadro: 0px
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.2)
En la pestaña Avanzado, asigne a la columna una clase personalizada:
- Clase CSS: et-mouse-card
Luego agregue este CSS personalizado al elemento principal:
|
01
|
max-width: 600px; |
Luego, asegúrese de establecer las propiedades de desbordamiento en «visible».
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
NOTA: Darle a la columna un ancho máximo de 600 px mantiene el diseño más consistente en diferentes tamaños de navegador y también aumenta la cantidad de espacio flotante alrededor de la columna para el contenedor flotante (o fila). El radio del borde (esquinas redondeadas) que agregamos ocultará el desbordamiento, por lo que debemos configurarlo como visible. Si no hacemos esto, la animación no funcionará como se esperaba.
Parte 2: Creación de los elementos de la tarjeta
#1 El fondo del círculo con logo
Para el primer elemento dentro de nuestra tarjeta, agregaremos un fondo circular que incluye un logotipo que se colocará detrás de la imagen de nuestra bicicleta.
Agregue un nuevo módulo de texto a la columna.
Elimina el texto predeterminado para que el contenido del cuerpo esté vacío.
Luego agrega un fondo degradado:
- Fondo degradado Color izquierdo: #443763
- Fondo degradado Color derecho: #ea3900
Además del fondo degradado, agregue un logotipo para la imagen de fondo.
- Imagen de fondo: [agregue cualquier imagen de logotipo png que tenga aproximadamente 60 px por 60 px]
- Tamaño de la imagen de fondo: Tamaño real
En la pestaña de diseño, actualice lo siguiente:
- Ancho: 160 px (escritorio), 150 px (tableta), 80 px (teléfono)
- Altura: 160 px (escritorio), 150 px (tableta), 80 px (teléfono)
- Esquinas redondeadas: 50%
Los valores coincidentes de ancho y alto y el radio del borde del 50% nos dan la forma de círculo que estamos buscando.
En la pestaña Avanzado, actualice la posición de la siguiente manera:
- Posición: Absoluta
- Ubicación: Centro superior
- Desplazamiento vertical: 15 %
#2 La imagen de la tarjeta
Para crear la imagen del producto (en este caso, una bicicleta), agregue un nuevo módulo de imagen debajo del módulo de texto anterior.
Luego cargue la imagen en el módulo. Asegúrate de que sea una imagen en formato png con fondo transparente. Estoy usando la imagen de la bicicleta de nuestro paquete de diseño de reparación de bicicletas .
En la pestaña de diseño, actualice lo siguiente:
- Alineación de imagen: Centro
- Ancho: 90%
- Margen: 4vh inferior
En la pestaña Avanzado, asigne a la imagen una clase personalizada:
- Clase CSS: et-card-image
#3 El encabezado de la tarjeta
Con nuestra imagen en su lugar, agregue un nuevo módulo de texto debajo para crear el encabezado de nuestra tarjeta.
En el contenido del cuerpo del nuevo módulo de texto, pegue el siguiente HTML de encabezado H2:
|
01
|
<h2>The <span style="color: #ea3900;">Divi</span> Bike</h2> |
En la pestaña de diseño, actualice lo siguiente:
- Título 2 Fuente: Bebas Neue
- Encabezado 2 Alineación de texto: centro
- Título 2 Color del texto: #443763
- Título 2 Tamaño del texto: 75 px (escritorio), 60 px (tableta), 45 px (teléfono)
- Encabezado 2 Espaciado entre letras: 0,05 em
- Margen: 4vh inferior
En la pestaña Avanzado, agregue una clase personalizada:
- Clase CSS: e-card-heading
#4 El texto de información de la tarjeta
El uso de módulos de texto separados para el encabezado y el texto de información nos permitirá agregar diferentes efectos de animación 3D a cada uno de ellos. Para crear el texto de información debajo del encabezado, agregue un nuevo módulo de texto debajo del módulo de texto del encabezado.
Luego agregue el siguiente contenido al cuerpo:
|
01
|
<p>The One and Only Divi Bike<br>(By Elegant Themes)</p> |
En la pestaña de diseño, actualice lo siguiente:
- Peso de fuente de texto: semi negrita
- Texto Tamaño del texto: 18 px (escritorio), 16 px (tableta y teléfono)
- Altura de la línea de texto: 1,8 em
- Alineación de texto: centro
- Margen: 4vh
Luego dale al módulo de texto una clase personalizada:
- Clase CSS: et-card-info
#5 El botón de la tarjeta
Para crear el botón para la tarjeta, agregue un nuevo módulo de botón debajo del módulo de texto de información.
En el modal de configuración del botón, actualice el texto del botón.
- Texto del botón: hacer una oferta
En la pestaña de diseño, diseñe el botón de la siguiente manera:
- Usar estilos personalizados para el botón: SÍ
- Tamaño del texto del botón: 25 px (escritorio), 20 px (tableta), 16 px (teléfono)
- Color del texto del botón: #ffffff
- Color de fondo del botón: #443763
- Ancho del borde del botón: 0px
- Borde del botón Radio: 30px
- Espaciado entre letras de botones: 0,1 em
- Fuente del botón: Bebas Neue
- Relleno (escritorio): 0,5 em arriba, 0,5 em abajo, 3 em izquierda, 3 em derecha
- Relleno (teléfono): 0,5 em arriba, 0,5 em abajo, 2 em izquierda, 2 em derecha
Luego dale al botón una clase personalizada:
- et-card-boton
resultado hasta ahora
Aquí está el resultado del diseño hasta ahora.
Ahora, todo lo que necesitamos es un código personalizado.
Parte 3: agregar el código personalizado (CSS y JQuery)
Ahora que nuestro diseño está completo, podemos agregar el código CSS y JQuery necesario para crear el efecto dinámico de animación 3D del movimiento del mouse en la tarjeta/columna y los elementos de la tarjeta.
Para hacer esto, agregue un módulo de código debajo del módulo de botón.
Luego pegue el siguiente CSS personalizado en el cuadro de código asegurándose de envolver el CSS en las etiquetas de estilo .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
/*add perspective to row for 3d perspective of child elements*/.et-hover-container {perspective: 1000px;}/*preserve-3d needed for 3d effect on card elements*/.et-mousemove-card {transform-style: preserve-3d;transition: all 100ms linear !important;}/*transition timing function and duration for card elements*/.et-card-image,.et-popout-title,.et-card-info,.et-mousemove-card .et_pb_button_module_wrapper {transition: all 750ms ease-out !important;}/*transform styles for card elements*/.et-card-image.transform-3d {transform: translateZ(150px) rotateZ(10deg) !important;}.et-card-heading.transform-3d {transform: translateZ(150px) !important;}.et-card-info.transform-3d {transform: translateZ(50px) !important;}.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {transform: translateZ(150px) rotateX(20deg) !important;} |
Debajo del CSS, pegue el siguiente JQuery asegurándose de envolver el código en las etiquetas del script .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
jQuery(document).ready(function ($) {//Itemsvar $hoverContainer = $(".et-hover-container");var $mousemoveCard = $(".et-mousemove-card");var $cardImage = $(".et-card-image");var $cardHeading = $(".et-card-heading");var $cardInfo = $(".et-card-info");var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");//Moving Animation Event$hoverContainer.on("mousemove", function (e) {let xAxis = (window.innerWidth / 2 - e.clientX) / 25;let yAxis = (window.innerHeight / 2 - e.clientY) / 25;$mousemoveCard.css("transform",`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`);});//Animate on Hover$hoverContainer.hover(function () {$mousemoveCard.toggleClass("transform-3d");$cardHeading.toggleClass("transform-3d");$cardImage.toggleClass("transform-3d");$cardButton.toggleClass("transform-3d");$cardInfo.toggleClass("transform-3d");});//Pop Back on mouseleave$hoverContainer.on("mouseleave", function () {$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);});}); |
Sobre el Código
CSS
Para dar a nuestros elementos posicionados en 3D (la columna y los módulos), necesitamos usar la propiedad CSS de perspectiva en la fila (o contenedor flotante).
|
01
02
03
|
.et-hover-container {perspective: 1000px;} |
Luego, debemos asegurarnos de que esos elementos de la tarjeta estén posicionados en el espacio 3D usando la propiedad de estilo de transformación con el valor de preservar-3d.
|
01
02
03
04
|
.et-mousemove-card {transform-style: preserve-3d;transition: all 100ms linear !important;} |
Luego establecemos la función de tiempo de transición y la duración cuando los elementos de la tarjeta están animados.
|
01
02
03
04
05
06
|
.et-card-image,.et-popout-title,.et-card-info,.et-mousemove-card .et_pb_button_module_wrapper {transition: all 750ms ease-out !important;} |
Por último, usamos la propiedad transform con una función translateZ para mover los elementos en el eje z creando el efecto emergente cada vez que pasamos el mouse sobre la fila y la clase transform-3d se agrega a cada elemento.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
.et-card-image.transform-3d {transform: translateZ(150px) rotateZ(10deg) !important;}.et-card-heading.transform-3d {transform: translateZ(150px) !important;}.et-card-info.transform-3d {transform: translateZ(50px) !important;}.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {transform: translateZ(150px) rotateX(20deg) !important;} |
El JQuery
Primero, declaramos todas las variables necesarias para orientar los elementos según su clase personalizada.
|
01
02
03
04
05
06
07
|
//Itemsvar $hoverContainer = $(".et-hover-container");var $mousemoveCard = $(".et-mousemove-card");var $cardImage = $(".et-card-image");var $cardHeading = $(".et-card-heading");var $cardInfo = $(".et-card-info");var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper"); |
Luego adjuntamos el evento mousemove a la fila (o contenedor flotante) con una función que calcula la posición del cursor para los ejes X e Y de la ventana del navegador y luego rota la tarjeta mousemove (o columna) como X e Y los valores cambian dinámicamente.
|
01
02
03
04
05
06
07
08
09
|
//Moving Animation Event$hoverContainer.on("mousemove", function (e) {let xAxis = (window.innerWidth / 2 - e.clientX) / 25;let yAxis = (window.innerHeight / 2 - e.clientY) / 25;$mousemoveCard.css("transform",`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`);}); |
Para activar el CSS de transformación (con translateZ) que mueve los elementos de la tarjeta en el espacio Z, cambiamos la clase transform-3d a cada elemento al pasar el cursor sobre la fila (o el contenedor de desplazamiento).
|
01
02
03
04
05
06
07
08
|
//Animate on Hover$hoverContainer.hover(function () {$mousemoveCard.toggleClass("transform-3d");$cardHeading.toggleClass("transform-3d");$cardImage.toggleClass("transform-3d");$cardButton.toggleClass("transform-3d");$cardInfo.toggleClass("transform-3d");}); |
Luego, debemos adjuntar el evento mouseleave a la fila con una función que agrega una propiedad de transformación CSS con las funciones de rotaciónY y rotaciónX a 0 grados. Esto volverá a colocar la columna (o tarjeta) en su lugar cuando el cursor se mueva fuera de la fila.
|
01
02
03
04
|
//Pop Back on mouseleave$hoverContainer.on("mouseleave", function () {$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);}); |
Resultado final
¡Mira el resultado final!
También puede consultar este codepen para ver una demostración en vivo del efecto.
Pensamientos finales
El efecto de animación dinámico de movimiento de ratón en 3D que construimos en este tutorial incluye efectos de animación únicos y avanzados que se pueden aprender fácilmente y que son emocionantes de explorar. La animación del movimiento del mouse que permite a los usuarios interactuar con el diseño se puede hacer con unas pocas líneas de JQuery. Y los efectos de desplazamiento 3D se basan en algunas propiedades de CSS que se pueden aprender fácilmente. En general, hay tantas posibilidades que pueden surgir al combinar un potente creador de páginas como Divi con la magia de JQuery. Con suerte, este te será útil.
Espero escuchar de usted en los comentarios.
¡Salud!