Ya tuve ayuda para crear la animación de mi sitio. https://creativeandcode.ch/

Cuando te desplazas hacia abajo y ves mi cartera, hay una animación cuando pasas el cursor sobre ella. Funciona muy bien, pero cuando se desplaza hacia abajo, la imagen de fondo parece subir y no se queda en la posición original en el fondo. ¿Alguien tiene una idea?

 for (let el of document.querySelectorAll('.hover')) { let image = new Image(); image.src = el.dataset.src; image.className = "followMouse"; el.addEventListener('mouseover',(e)=>{ document.getElementById('container').append(image); image.style.left = `${e.clientX - (image.width/2)}px`; image.style.top = `${e.clientY - (image.height/2)}px`; }) el.addEventListener('mouseout',(e)=>{ image.remove(); }) } window.addEventListener('mousemove',(e)=> { let image = document.querySelector('.followMouse'); if (image) { image.style.left = `${e.clientX - (image.width/2)}px`; image.style.top = `${e.clientY - (image.height/2)}px`; } })

HTML:

 <div id="container"> <a href="" data-src="road.png" class="hover"> <h1>Hover here!</h1> </a> </div>

CSS:

 #container { position: relative; } .followMouse { z-index: -1; position: absolute; }