Bewegende Hintergründe mit Maus Position

Nehmen wir an, Sie möchten die background-position eines Elements beim Überfahren mit der Maus verschieben, um dem Design etwas Pfiff zu verleihen. Sie haben ein Element wie dieses

<div class="module" id="module"></div>

Und Sie fügen ihm einen Hintergrund hinzu

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

Sie können die background-position in JavaScript wie folgt anpassen

const el = document.querySelector("#module");

el.addEventListener("mousemove", (e) => {
  el.style.backgroundPositionX = -e.offsetX + "px";
  el.style.backgroundPositionY = -e.offsetY + "px";
});

Siehe den Pen Bewegen Sie einen Hintergrund mit der Maus von Chris Coyier (@chriscoyier) auf CodePen.

Oder Sie könnten stattdessen CSS-Custom-Properties in JavaScript aktualisieren

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);
}

Siehe den Pen Bewegen Sie einen Hintergrund mit der Maus von Chris Coyier (@chriscoyier) auf CodePen.

Hier ist ein Beispiel, das den Hintergrund direkt in JavaScript bewegt, aber mit einem Übergang versehen ist, sodass er zur neuen Position gleitet, anstatt beim ersten Betreten zu ruckeln.

Siehe den Pen Bewegliche Hintergrundanzeige von Chris Coyier (@chriscoyier) auf CodePen.

Oder Sie könnten stattdessen ein tatsächliches Element bewegen (anstelle der background-position). Dies würden Sie tun, wenn sich auf dem verschiebbaren Element eine Art Inhalt oder Interaktivität befindet. Hier ist ein Beispiel dafür, das wieder CSS-Custom-Properties setzt, aber dann das Element tatsächlich über eine CSS-translate() und eine calc() bewegt, um die Geschwindigkeit zu dämpfen.

Siehe den Pen Hotjar Moving Heatmap Ad von Chris Coyier (@chriscoyier) auf CodePen.

Ich bin sicher, es gibt noch viele andere Möglichkeiten, dies zu tun – eine bewegliche SVG-ViewBox, Skripte, die eine Canvas steuern, WebGL… wer weiß! Wenn Sie ausgefeiltere Wege haben, dies zu tun, verlinken Sie sie in den Kommentaren.