En este tutorial vas a aprender a crear un efecto hover de inclinación en wordpress y divi, es decir, al momento de pasar el cursor o al posicionarte sobre un módulo éste tendrá un efecto de inclinación tipo 3D.
Este efecto lo lograremos gracias a una librería llamada Tilt.js.
Tilt.js es una librería jQuery que sirve para crear algunos efectos visuales 3D para secciones, filas o cualquier módulo de divi, es muy fácil de implementar y le dará un toque más pro a tu sitio web.
¿Estás listo para aprender a instalar Tilt.js con divi? ¡Vamos a ello!
Lo primero que necesitamos hacer es instalar la librería en nuestro sitio. Para eso en un módulo código (en la página donde queremos el efecto) pegamos el siguiente CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>Posteriormente vamos a necesitar este otro fragmento de código jQuery que nos va a servir para que el efecto funcione (también lo pegaremos en un módulo código):
<script>
jQuery(document).ready(function( $ ){
$('.efecto-tilt').tilt({
perspective: 500,
scale: 1,
speed: 300,
glare: false,
maxGlare: 1,
});
});
</script>Y por último, a la sección, fila o módulo que deseemos aplicar el efecto debemos colocarle un nombre de clase: «efecto-tilt» sin las comillas.
Si aún no tienes claro como implementar esta librería, no esperes más y dale play al video tutorial.
!!Hola oscar!! como hago el formulario que aparece en tu blog que dice : Unete a los 9650 suscriptores¡¡ Gracias
Hola Jhon eso lo he realizado con un plugin de Elegant themes, se llama Bloom es el hermano de divi, aquí tienes el enlace: https://www.elegantthemes.com/plugins/bloom/
Hola Oscar, como aplicar ese efecto en el modulo de blog, pero tomando cada post y no todo el modulo.
Hola Monze, en el código jquery intenta reemplazar .efecto-tilt por .et_pb_post que es la clase por defecto que le coloca divi a cada entrada del blog. Me comentas si te funcionó o no por fa. Saludos.
Hola Oscar, si funciona, mueve cada post eso lo respeta, pero al mismo tiempo continua moviendo todo el modulo del blog. Saludos.
Muy buenos tus videos y vi tus páginas y me gustaron bastante , Ojala sigas compartiendonos materiales . Saludos desde Costa Rica.
Seguiremos aportando muchos más Pablo. Atento al blog y al canal de youtube 🙂 Saludos hasta Costa Rica!
Hola, gran efecto!
Me gustaría saber como debo modificar el código para que el efecto sea el mismo, pero contrario. Es decir, ahora el plano se inclina subiendo por el lado del cursor. Yo quiero que baje por el lado del cursor.
Hola Psyco, aquí tienes la documentación de tilt.js y desde allí puedes ver las opciones que permite la librería.
Hola copie y realice los pasos que sujiere, pero no funciono, que podria estar faltando, hay alguna funcion o botón en el constructor de DIVI «opciones de tema» que deba tener en cuenta, tal vez me falte activar o destildar algo?
Hola Hector, en las versiones recientes te recomiendo entres a Divi > Opciones del tema > General > Performance y desactives la opción: Defer jQuery And jQuery Migrate
Con eso debe funcionar sin problema 😀
Buenas Oscar, Gracias por tus excelentes aportes, te comento que realice el mismo proceso que explicas, incluso realizando la configuración en performance del tema como sugeriste en el comentario anterior, sin embargo, en el inspector aparece lo siguiente Uncaught TypeError: this.mousePositions is undefined y no logro el efecto de la librería tilt
Hola Luis, probaste deshabilitando todas las opciones del performance?