Digamos que desea mover el background-position en un elemento mientras pasa el mouse sobre él para darle un poco de dinamismo al diseño. Tienes un elemento como este:
<div class="module" id="module"></div>Y le arrojas un fondo:
.module {
background-image: url(big-image.jpg);
}Puede ajustar el background-position en JavaScript así:
const el = document.querySelector("#module");
el.addEventListener("mousemove", (e) => {
el.style.backgroundPositionX = -e.offsetX + "px";
el.style.backgroundPositionY = -e.offsetY + "px";
});Vea el Pen Move a background with mouse de Chris Coyier (@chriscoyier) en CodePen.
O bien, podría actualizar las propiedades personalizadas de CSS en JavaScript en su lugar:
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);
}Vea el Pen Move a background with mouse de Chris Coyier (@chriscoyier) en CodePen.
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:
Vea el anuncio de fondo móvil de pluma de Chris Coyier (@chriscoyier) en CodePen.
O bien, podría mover un elemento real en su lugar (en lugar del background-position). Haría esto si hubiera algún tipo de contenido o interactividad en el elemento deslizante. Aquí hay un ejemplo de eso, que establece las propiedades personalizadas de CSS nuevamente, pero luego mueve el elemento a través de un CSS translate() y un calc() para moderar la velocidad.
Vea el anuncio de mapa de calor móvil Pen Hotjar de Chris Coyier (@chriscoyier) en CodePen.
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.