Tło poruszające się za kursorem myszy

Tematem jaki tym razem chce poruszyć jest tło poruszające się za kursorem myszy. W praktyce końcowym efektem będzie tło będzie podrożało podążające za ruchem myszki odsłaniając lub chowając fragmenty obrazu, zdjęcia lub grafiki umieszczonej w tle. Efekt ten można użyć jako np. tło elementu lub całej sekcji strony.

Przejdźmy zatem do pracy.

Budujemy strukturę pod ruchome tło

Jak praktycznie zawsze zaczynamy od budowy podstawy w moim przypadku będzie ona oparta o HTML (a następnie rozbudowana). Dlatego pokażę tutaj jedynie część wspólną kodu. Tak wiec zaczniemy ją od deklaracji kontenera, w którym będziemy umieszczać ruchome tło.

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

W moim przykładzie kontener z mobilnym tłem nie będzie mieć zawartości, przynajmniej na razie by nie odwracała ona uwagi od samego efektu. Dodatkowo kod będzie bardziej czytelny.

W kolejnym kroku dodam do mojego nowego kontenera tło. Na początek oczywiście będzie to zwykłe tło, grafika nad, którą w kolejnych etapach posłuży do uzyskania efektu.

.moveContainer{
    background-image: url(bg-image.jpg);
}

To oczywiście tylko fragment ostatecznego kodu. W końcu kontener trzeba będzie też ustawić. Na chwilę obecną nie ma on bowiem nadanej wysokości. W praktyce więc jest płaski i nic się nam nie wyświetli.

warto przeczytać -> Jak umieścić grafikę w tle strony

Ruchome tło w JavaScript

Teraz pra na kod JS, dodający animacje.

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

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

Po złożeniu kodu otrzymałam:

Ruchome tło JS + CSS

Istnieje też możliwość ograniczenia działania JS (javaScript) i częściowe zastąpienie go CSS. W takiej sytuacji kod będzie trochę się różnił od tego co umieściłam powyżej:

Po pierwsze skrócimy kod JS do minimum:

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

el.addEventListener("mousemove", (e) => {
  el.style.setProperty('--x', -e.offsetX + "px");
  el.style.setProperty('--y', -e.offsetY + "px");
});

Następnie dodamy nowe parametry do kodu CSS:

.moveContainer{
  --x: 0px;
  --y: 0px;
  background-image: url(bg-image.jpg);
  background-position: var(--x) var(--y);
}

Jak widać pojawiło się tutaj kilka ciekawych właściwości CSS, które na co dzień rzadko lub w ogóle nie są używane. Odpowiadają one za pozycjonowanie grafiki w kontenerze.

Źródła:

• https://css-tricks.com/moving-backgrounds/
• https://css-tricks.com/moving-backgrounds-with-mouse-position/