Tarjeta de producto con efecto Tilt y 3D en Divi

BL Tarjeta de producto con efecto Tilt y 3D en Divi

En este tutorial te mostraremos cómo crear un efecto Tilt y 3D en una tarjeta de producto personalizado con Divi. Con este tutorial, podrás crear un efecto hover muy interesante que potenciará la venta de un producto o servicio que quieras destacar en una landing page de venta.

El efecto Tilt es un efecto de movimiento de rotación de un elemento a medida que un usuario pasa el cursor por encima y lo mueve. El elemento sigue el movimiento del curso y causa este efecto superinteresante para agregar movilidad a cualquier tipo de elemento de un sitio web.

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Puedes usar el efecto Tilt en Divi para mejorar una campaña de venta de productos en tu eCommerce, o landing page de venta. Y en este tutorial podrás aprender a hacerlo de forma rápida, además de que incluimos un efecto hover 3D de tarjetas de productos que también te puede interesar.

Índice

Mira el resultado que lograremos:

Crea una tarjeta de producto o un elemento gráfico para aplicar el efecto Tilt y 3D

Para comenzar, diseña un elemento gráfico al cual puedas aplicar el efecto Tilt. Para nuestro ejemplo, hemos usado una plantilla importada directamente desde la librería de Divi. Por lo que aquí es cuestión de creatividad y de que elijas mostrar el diseño que quieras.

Para nuestro ejemplo, hemos seleccionado una fila con 4 módulos. Estos módulos contienen una imagen, un título, un texto descriptivo y un botón, le hemos dado los estilos que ves en el video, y nos al quedado este resultado:

BL Tarjeta de producto con efecto Tilt y 3D en Divi

Esto nos permitirá personalizar el módulo optin de Divi a nuestra manera y dejarlo con un aspecto minimalista y simple. Lo siguiente es aplicar las clases a cada uno de los elementos, las veremos acá:

Clases CSS a usar para efecto 3D:

  • Clase para la fila: et-hover-container
  • Clase para cada columna:  et-mousemove-card
  • Clase para la imagen:  et-card-image
  • Clase para ti título del producto: et-card-heading
  • Clase para la información del producto: et-card-info
  • Clase para el botón: et-card-button

Después de asignar las clases aplicaremos el siguiente CSS para generar el efecto 3D a nuestra tarjeta de producto.

CSS a usar para efecto 3D:

<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>

JavaScript a usar para efecto 3D

Este código lo podemos meter en un módulo de código dentro del mismo ejemplo tal como mostramos en el tutorial. Con ello completaremos la funcionalidad del efecto 3D

<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>

Con ello podremos crear un poderoso efecto 3D que se aplicará a cualquier elemento que quieras. Pero si lo que quieres es aplicar un efecto Tilt, lo veremos en los próximos pasos.

Clase CSS para usar el efecto Tilt

Clase CSS: et-column-js-tilt

Esta clase se debe aplicar en la columna de la fila donde queremos implementar el efecto:

BL Tarjeta de producto con efecto Tilt y 3D en Divi

Script para Efecto Tilt

Este script, al igual que el anterior, lo puedes aplicar dentro de un módulo de código con Divi y ponerlo debajo de cualquier elemento en el diseño. Con este Script estaremos generando la funcionalidad para el efecto Tilt dentro de Divi.

<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>

<script>
jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {
    
    $(".et-column-js-tilt").tilt({
  scale: 1.1,
  perspective: 1000,
});
 
  }
});
</script>

Conclusiones

El efecto Tilt 3D dentro de Divi es una buena forma de promocionar alguna tarjeta de producto o landing page de venta para potenciar una campaña publicitaría, o simplemente mejorar el diseño de un sitio web de forma profesional.

¿Te ha gustado el tutorial? Recuerda compartir acá abajo y dejar tus comentarios.

¡Un abrazo!

Artículos relacionados

Comentarios

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas más frecuentes que los usuarios hacen sobre Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
10
días
10
horas
10
minutos
10
segundos
¡Registrate en nuestro próximo Live!
24 de noviembre de 2023 9:30 hrs (CDMX)
10
días
10
hrs
10
min
10
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
10
días
10
horas
10
minutos
10
segundos
25% OFF BLACK FRIDAY SALE!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
10
días
10
hrs
10
min
10
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!