Rörliga Bakgrunder Med Musens Position.

0
46

Låt oss säga att du ville flytta background-position på en del som du för musen över den för att ge design en liten kraft. Du har ett element som denna:

<div class=”modul” id=”modul”></div>

Och du kasta en bakgrund på det:

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

Du kan justera background-position i JavaScript så här:

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

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

Se Pennan Flytta en bakgrund med musen genom att Chris Coyier (@chriscoyier) på CodePen.

Eller, kan du uppdatera CSS anpassade egenskaper i JavaScript istället:

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

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

Se Pennan Flytta en bakgrund med musen genom att Chris Coyier (@chriscoyier) på CodePen.

Här är ett exempel som rör sig i bakgrunden direkt i JavaScript, men med en övergång tillämpas, så att det glider till den nya positionen snarare än runkar runt den första gången du ange:

Se Pennan Lös Bakgrund Ad av Chris Coyier (@chriscoyier) på CodePen.

Eller, kan du flytta en verklig faktor i stället (snarare än background-position). Skulle du göra det här om det är någon form av innehåll eller om interaktivitet på rörligt inslag. Här är ett exempel på detta, som sätter CSS anpassade egenskaper igen, men sedan faktiskt flyttar elementet via en CSS-translate() och en calc() för att dämpa hastigheten.

Se Pennan Hotjar Flytta Heatmap Ad av Chris Coyier (@chriscoyier) på CodePen.

Jag är säker på att det finns massor av andra sätt att göra detta — en glidande SVG viewBox, skript för att styra en duk, webGL… vem vet! Om du har några finare sätt att hantera detta, länk ’em up i kommentarerna.