Bewegte Hintergründe Mit Der Maus Position

0
32

Lassen Sie uns sagen, Sie wollten zum verschieben der background-position-auf einem element, wie Sie mit der Maus über Sie, um dem design ein wenig Pep. Sie haben ein element wie diesem:

<div class=”Modul” id=”module”></div>

Und Sie werfen einen hintergrund:

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

Sie können die hintergrund-position in JavaScript so:

const el = document.querySelector(“#module”);

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

Finden Sie den Stift Bewegen, einen hintergrund mit der Maus von Chris Coyier (@chriscoyier) auf CodePen.

Oder, Sie könnten update-benutzerdefinierte CSS-Eigenschaften in JavaScript statt:

const el = document.querySelector(“#module”);

el.addEventListener(“mousemove”, (e) => {
el.Stil.setProperty(‘–x’, -e.offsetX + “px”);
el.Stil.setProperty(‘–y’, -e.offsetY + “px”);
});
.Modul {
–x -: 0px;
–y: 0px;
background-image: url(large-image.jpg);
background-position: var (- x) var(–y);
}

Finden Sie den Stift Bewegen, einen hintergrund mit der Maus von Chris Coyier (@chriscoyier) auf CodePen.

Hier ist ein Beispiel, bewegt sich der hintergrund direkt in JavaScript, aber mit einem übergang versehen, sodass Sie die Folien an die neue position, anstatt Rucken rund um das erste mal, wenn Sie eingeben:

Finden Sie den Stift Beweglichen Hintergrund Anzeige von Chris Coyier (@chriscoyier) auf CodePen.

Oder Sie bewegen könnte, eine tatsächliche element anstelle (anstelle der background-position). Sie würde dies tun, wenn es irgendeine Art der Inhalte oder Interaktivität auf das Gleitelement. Hier ist ein Beispiel, legt fest, welche CSS-benutzerdefinierte Eigenschaften wieder, aber dann tatsächlich verschiebt das element über eine CSS-translate() und calc (), um die Dämpfung der Geschwindigkeit.

Finden Sie den Stift Hotjar Bewegen Heatmap-Anzeige von Chris Coyier (@chriscoyier) auf CodePen.

Ich bin sicher, es gibt jede Menge andere Möglichkeiten, dies zu tun — eine bewegte SVG viewBox, Scripten ein canvas, webGL,… wer weiß! Wenn Sie noch schickere Möglichkeiten, dies zu behandeln, link ’em up in den Kommentaren.