Con la ayuda de Divi Builder, podemos hacer muchos diseños únicos y creativos. Hoy veremos cómo crear una animación 3D dinámica utilizando divi generador de páginas visuales que es interactivo con el movimiento del cursor del ratón. Por lo general, pasamos el cursor o hacemos clic en animación en un objeto, pero aquí, animaremos un objeto que se moverá en diferentes direcciones con el movimiento del ratón. Además, verá cómo agregar un efecto 3D flotante a un objeto que realiza animación interactiva y dar vida al diseño!
Vamos a utilizar Constructor divi para el diseño y más adelante, vamos a añadir algunos CSS y código jQuery para crear la funcionalidad de animación que hará que el diseño vivo! ¡Puedes usar este diseño para mostrar tus productos de una nueva manera a tus visitantes!
Diseño final
Si todo va bien como planeamos, entonces nuestro diseño final se verá muy parecido a eso.
Creación de un efecto de movimiento dinámico de ratón 3D en Divi
Tarea 1: Configuración de página
Ya que desea crear este efecto en su página web, creemos que ya ha instalado la última versión de Divi. Ahora, "Añadir una página" desde el panel, titular como lo necesite y expandirlo con divi builder.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahora
Ahora elija "Construir desde cero" y comience ahed.
Para activar la animación 3D al pasar el cursor, nos dirigiremos a la fila. Lo llamaremos "Contenedor flotante". Por otro lado, la columna actuará como una tarjeta, que se animará con los elementos secundarios durante el desplazamiento sobre la fila.
Section Styling
Abra la configuración de sección predeterminada y actualice lo siguiente
- Color de fondo - RGBA(68,55,99,0.1). Aquí 0.1 hay opacidad.
- Agregue el relleno "7vh" tanto en la parte superior como en la inferior.
Hover Container
Ahora agregue una fila de una columna a la sección preparada.
Ahora actualice la configuración de fila con los siguientes cambios.
- Habilite "Ancho de canalón personalizado" y cambie el valor a 1
- Ancho 100%
- Ancho máximo: 70% (escritorio), 60% (tableta), 50% (móvil)
- Relleno: 7vh en la parte superior e inferior, 5vw en izquierda y derecha.
Bajo la lengueta avanzada, agregue una clase CSS personalizada.
- Clase CSS: contenedor et-hover
Además, agregue el código CSS al elemento principal.
display:flex;
align-items:center;
justify-content:center;
The Card
Después de finalizar la actualización de fila, abra la configuración de la columna para aplicar estilo a la tarjeta.
- Color de fondo #ffffff
- Relleno: 7vh superior, 7vh inferior, 5% izquierda, 5% derecha
- Esquinas redondeadas: 30px
- Sombra de cuadro: Vea la captura de pantalla
- Posición vertical de la sombra de la caja: 0px
- Fuerza de desenfoque de sombra de caja: 80px
- Color de la sombra: rgba(0,0,0,0.2)
Bajo la lengueta avanzada, agregue una clase CSS personalizada.
- Clase CSS: et-mousemove-card
Además, agregue este código CSS bajo elemento principal.
max-width: 600px;
Ahora establezca las propiedades de desbordamiento en visibles para el desbordamiento horizontal y vertical.
Tarea 3: Creación del elemento de tarjeta
The Circle Background With Logo
Para el primer elemento de nuestra tarjeta, vamos a añadir un fondo circular que incluye nuestro logotipo que se sentará detrás de nuestra imagen principal del producto.
Ahora agregue "Texto" en la columna y elimine el texto predeterminado para mantener el cuerpo vacío.
Es hora de añadir un fondo de degradado.
- Fondo degradado Color izquierdo #443763
- Fondo degradado Color derecho #EA3900
- Establecer dirección de degradado en 90 deg
Junto con el color de degradado, agregue un logotipo como imagen de fondo. El tamaño de la imagen debe ser de 60px por 60px y establecer el valor del tamaño de la imagen de fondo en "Tamaño real"
En la pestaña "Diseño", cambie los valores como se muestra a continuación en la sección "Tamaño". Establezca el valor de ancho 160px para el escritorio, 150px para la tableta y 80px para el teléfono inteligente.
Además, establezca el valor de altura igual que el ancho. Por último, establezca las esquinas redondeadas en valor del 80% en la sección "Borde".
En la pestaña "Avanzado", actualice las posiciones como se indica a continuación.
- Posición : Absoluta
- Ubicación : Top Center
- Desplazamiento vertical : 15%
The Card Image
Ahora, como hemos terminado con la parte del logotipo, vamos a añadir la imagen del producto en la tarjeta. Agregaremos un nuevo módulo de imagen bajo el módulo de texto anterior.
Ahora cargue una imagen del producto. Asegúrese de que la imagen es transparente y que está en formato Png. Aquí, estamos usando la imagen de un ferrari rojo.
En la pestaña "Diseño", cambie los valores como se menciona a continuación.
- Alineación de imagen: Centro
- Ancho: 90%
- Margen: 12vh arriba y 5vh inferior (ajustar los valores según su necesidad)
En la sección de la pestaña "Avanzado", agregue una clase CSS personalizada para la imagen.
- Clase CSS: et-card-image
The Car Heading
Ahora crearemos un encabezado para la Tarjeta. Con nuestra imagen de coche en posición, vamos a añadir un módulo de texto debajo de la imagen para crear nuestro encabezado de tarjeta.
En el cuerpo, quite el texto predeterminado y agregue el encabezado H2 de HTML que se indica a continuación.
<h2>The <span style="color: #ea3900:"> Ferrari</span> Car</h2>
Ahora, en la sección de diseño cambie los siguientes valores:
- Rúbrica 2 Fuente : Bebas Neue
- Partida 2 Alineación de texto : Centro
- Encabezado 2 Color de texto: #443763
- Partida 2 Tamaño de texto: 75px para escritorio, 60px para tableta y 45px para móvil.
- Partida 2 Espaciado de letras : 0,05em
- Margen : 4vh en la parte inferior
En la "sección Avanzada" agregue una clase CSS personalizada
- Clase CSS: e-card-heading
The Card Info
Ahora agregaremos la información sobre la tarjeta. Añadiremos otro módulo de texto para la información porque eso nos permitirá añadir diferentes efectos de animación 3D a cada uno de ellos. Vamos a agregar un nuevo módulo de texto bajo el módulo de texto del encabezado.
Ahora agregue el siguiente contenido de texto al cuerpo.
<p>The one and only Ferrari Car <br>(By CodeWatchers)</p>
En la pestaña diseño, actualice lo siguiente:
- Peso de fuente de texto : Semi Bold
- Tamaño del texto : 18px (escritorio) y 16px (tableta y teléfono.)
- Altura de la línea de texto : 1,8em
- Alineación de texto : Centro
- Margen : 4vh
Ahora agregue una clase CSS personalizada a este módulo.
- Clase CSS: et-card-info
The Button
Ahora agregue un nuevo módulo de botones debajo del módulo de texto de información. Esto agregará un botón en la tarjeta.
En la pestaña "Contenido" de la configuración del botón, cambie el texto del botón.
- Texto del botón: Haga una oferta.
En la pestaña "Diseño", estilizar el botón como se menciona a continuación.
- Usar estilos personalizados para button: YES
- Tamaño del texto del botón: 25px (escritorio), 20px (tableta), 16px (teléfono)
- Color del texto del botón: #ffffff
- Color de fondo del botón: #443763
- Ancho del borde del botón: 0px
- Radio de borde del botón: 30px
- Espaciado de letras de botón: 0,1em
- Fuente del botón: Bebas Neue
- Relleno (escritorio): 0,5em superior, 0,5em inferior, 3em a la izquierda, 3em a la derecha
- Relleno (teléfono): 0,5em superior, 0,5em inferior, 2em a la izquierda, 2em a la derecha
Ahora agregue una clase CSS personalizada
- Clase CSS: botón et-card
Result Till Now
Aquí está nuestra salida de diseño final sin la animación.
Ahora agregaremos un código personalizado para dar vida a este diseño.
Dado que nuestro diseño está completo, ahora agregaremos código CSS y JQuery para dar a nuestras columnas y elementos de tarjeta recién creados para darle un efecto de animación dinámica de movimiento del ratón 3D.
Para ello, agregue un nuevo módulo de código debajo del módulo de botones.
Pegue el código CSS personalizado dado en el cuadro y asegúrese de ajustar el código en la etiqueta "Estilo".
<style>
/*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;
}
</style>El código CSS se verá así en la pestaña de contenido del módulo Código.
Debajo del CSS, agregue el siguiente JQuery y asegúrese de que el código está dentro de las etiquetas "Script".
<script>
jQuery(document).ready(function ($) {
//Items
var $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)`);
});
});
</script>
El código siguiente debe tener este aspecto en el panel de código.
Ahora guarde todo el trabajo y compruebe todo el trabajo en una página en vivo.
Salida final
Así que todo nuestro diseño se ve así. ¡Genial eh!
Palabras finales
La animación 3D que vimos en el tutorial de hoy es muy fácil y divertido de aprender. Este es un efecto de animación único y avanzado que se puede controlar mediante el movimiento del ratón. Podemos diseñar esto a través de una codificación CSS y JQuery simple. Sin duda, Divi es un potente constructor de páginas y a través de la codificación personalizada, es posible llevar un diseño mágico a los sitios web.
