Bewegende Achtergronden Met De Muis Positie

0
35

Laten we zeggen dat je wilde om te verplaatsen van de achtergrond-positie op een element als u met de muis over het te geven het ontwerp een beetje pit. Je hebt een element als dit:

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

En gooi je een achtergrond op het:

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

U kunt de background-position in JavaScript als dit:

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

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

Zie de Pen Verplaatsen van een achtergrond met de muis door Chris Coyier (@chriscoyier) op CodePen.

Of, je kan de update CSS aangepaste eigenschappen in het JavaScript in de plaats:

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

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

Zie de Pen Verplaatsen van een achtergrond met de muis door Chris Coyier (@chriscoyier) op CodePen.

Hier is een voorbeeld dat zich in de achtergrond direct in JavaScript, maar met een overgang toegepast, zodat het glijdt naar de nieuwe positie dan trekken rond de eerste keer dat u op enter:

Zie de Pen Roerende Achtergrond Ad van Chris Coyier (@chriscoyier) op CodePen.

Of, je kan het verplaatsen van de werkelijke element in de plaats (in plaats van de achtergrond-positie). Zou je dit doen als er een soort van inhoud of de interactiviteit van de glij-element. Hier is een voorbeeld, waarin de CSS aangepaste eigenschappen opnieuw, maar dan begint het element via een CSS-translate() en een calc() temperen de snelheid.

Zie de Pen Hotjar Bewegende Heatmap Ad van Chris Coyier (@chriscoyier) op CodePen.

Ik weet zeker dat er zijn tal van andere manieren om dit te doen — een bewegend SVG viewBox, scripts beheren van een doek, webGL… wie weet! Als je wat ingewikkelder manieren om dit te verwerken, link ’em up in de comments.