Fondos en movimiento con la posición del mouse

Digamos que deseas mover background-positionun elemento mientras pasas el mouse sobre él para darle un poco de dinamismo al diseño. Tienes un elemento como este:

div/div

Y le pones un fondo:

.module {  background-image: url(big-image.jpg);}

Puedes ajustar el background-positionen JavaScript de esta manera:

const el = document.querySelector("#module");el.addEventListener("mousemove", (e) = {  el.style.backgroundPositionX = -e.offsetX + "px";  el.style.backgroundPositionY = -e.offsetY + "px";});

O bien, puede actualizar las propiedades CSS personalizadas en JavaScript:

const el = document.querySelector("#module");el.addEventListener("mousemove", (e) = {  el.style.setProperty('--x', -e.offsetX + "px");  el.style.setProperty('--y', -e.offsetY + "px");});

.module {  --x: 0px;  --y: 0px;  background-image: url(large-image.jpg);  background-position: var(--x) var(--y);}

Aquí hay un ejemplo que mueve el fondo directamente en JavaScript, pero con una transición aplicada para que se deslice a la nueva posición en lugar de moverse bruscamente la primera vez que ingresa:

O bien, podría mover un elemento real (en lugar del background-position). Haría esto si hay algún tipo de contenido o interactividad en el elemento deslizante. Aquí hay un ejemplo de eso, que establece propiedades personalizadas de CSS nuevamente, pero luego mueve el elemento a través de CSS translate()y a calc()para moderar la velocidad.

Estoy seguro de que hay muchas otras formas de hacer esto: un viewBox SVG en movimiento, scripts que controlan un lienzo, webGL… ¡quién sabe! Si tiene algunas formas más sofisticadas de manejar esto, vincúlelas en los comentarios.