Fondos en movimiento con la posición del ratón | Programar Plus

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.

(Visited 15 times, 1 visits today)