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: