En este tutorial, te mostraré cómo crear un impresionante efecto de distorsión en imágenes al pasar el cursor sobre ellas usando Three.js, GSAP y la biblioteca HoverEffect. Aprenderás a integrar estos recursos en tu proyecto web y a personalizar el efecto para que se adapte perfectamente a tu diseño.
Además, veremos cómo agregar una imagen superpuesta que se muestre por encima del efecto de fondo. ¡Sigue estos pasos sencillos y dale un toque único a tu sitio web!
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://unpkg.com/hover-effect@latest/dist/hover-effect.umd.js"></script>
<script>
var myAnimation = new hoverEffect({
parent: document.querySelector('.my-div'),
intensity: 1.6,
speedIn: 3,
speedOut: 3,
image1: 'https://infozoos.byteweb.es/wp-content/uploads/2024/06/Img23.jpg',
image2: 'https://infozoos.byteweb.es/wp-content/uploads/2024/06/Img24.jpg',
displacementImage: 'https://infozoos.byteweb.es/wp-content/uploads/2024/06/10.jpg'
});
</script>
