Bevegelige Bakgrunner Med Musen Posisjon

0
35

La oss si at du ønsket å flytte bakgrunnen-posisjon på et element som du musen over det å gi design litt fres. Du har et element som dette:

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

Og du kaste en bakgrunn på det:

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

Du kan justere background-position i JavaScript som dette:

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

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

Se Penn Flytte en bakgrunn med musen ved Chris Coyier (@chriscoyier) på CodePen.

Eller, kan du oppdatere CSS egendefinerte egenskaper i JavaScript i stedet:

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

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

Se Penn Flytte en bakgrunn med musen ved Chris Coyier (@chriscoyier) på CodePen.

Her er et eksempel som beveger seg bakgrunnen direkte i JavaScript, men med en overgang anvendt slik at det glir til ny stilling snarere enn krampetrekninger rundt den første gangen du enter:

Se Penn Bevegelig Bakgrunn Ad av Chris Coyier (@chriscoyier) på CodePen.

Eller, du kan flytte en faktisk element i stedet (snarere enn bakgrunnen-posisjon). Du vil gjøre dette hvis det er noen typer innhold eller interaktivitet på å skyve-element. Her er et eksempel på det, som setter egendefinert CSS egenskaper igjen, men da faktisk flytter elementet via en CSS oversette() og en calc – () for å dempe hastigheten.

Se Penn Hotjar Flytte Heatmap Ad av Chris Coyier (@chriscoyier) på CodePen.

Jeg er sikker på at det er massevis av andre måter å gjøre dette på — en beveger seg SVG viewBox, skript til å kontrollere et lerret, webGL… hvem vet! Hvis du har noen flottere måter å håndtere dette, link ’em opp i kommentarfeltet.