Tło podążające za myszką
Przedstawiam ciekawy efekt osiągnięty z pomocą jQuery, który sprawia, że tło jakby podąża za ruchem myszki. Można tego użyć ustawiając zdjęcie o dużej rozdzielczości za treścią strony, uzyskując w ten sposób namiastkę przestrzenności.
Tło domyślnie jest wycentrowane, a podczas wykonywania jakichkolwiek ruchów kursorem zostaje odchylone w tę samą stronę, w którą przesunęła się myszka.
Dodatkowo posłużyłem się zmienną divisor, w której trzymam wartość, przez którą zostaje podzielone przesunięcie – jeżeli jest w zakresie od 0 do 1 to tło przesuwa się szybciej niż kursor, a jeśli zmienna jest większa od 1 – tło przesuwa się wolniej (2 razy wolniej dla 2, 3 razy wolniej dla 3 itd.). W przypadku ustawienia divisor na 1, tło będzie się przesuwało w takim samym tempie co mysz.
Kod JS całości (oprócz tego należy załączyć jQuery!):
$(window).load(function() {
$('.bg').on('mousemove', function(e) {
var divisor = 4;
var bgWidth = 1024;
var bgHeight = 768;
var mousePosX = e.pageX - $(this).offset().left;
var mousePosY = e.pageY - $(this).offset().top;
var mouseMoveX = (mousePosX - $(this).width()/2)/divisor;
var mouseMoveY = (mousePosY - $(this).height()/2)/divisor;
$(this).css('background-position', (-(bgWidth-$(this).width())/2+mouseMoveX)+'px '+(-(bgHeight-$(this).height())/2+mouseMoveY)+'px');
});
});
Element, którego tło ma reagować otrzymał w powyższym przykładzie klasę bg. Bardzo ważne jest, aby ustawić ręcznie szerokość i wysokość obrazka. Na podstawie jego i rozmiarów okna przeglądarki obliczane są przesunięcia.
Samo tło ustawiamy używając CSS i background lub background-image. Poniżej demo.
Polecam też wybróbować dodanie minusa dla zmiennych mouseMoveX i mouseMoveY – da nam to bardzo fajny rezultat, zdjęcie będzie poruszało się w kierunkach przeciwnych.
Jako tło do strony to za bardzo rozprasza uwagę.
Mama ostatnio opublikował Cały czas był przy mnie mój kochany i dzielny mąż! – opis dumnej mamy Aleksandry
Ciekawy wpis. Z pewnością bardzo mi się przyda. Dzięki 🙂
Interesujący efekt, wykorzystam go na pewno w swoich projektach!
Dla mnie to tylko niepotrzebne udziwnienia, coś w stylu scrolla do przewijania. Tak jak ceag zastanawiam się, na co komu taki bajer na stronie. Czasami im prościej, tym lepiej. 😉
Introwertyczka ostatnio opublikował Blogowanie: jak urozmaicić treść posta?
Ten efekt trochę jak na smartfonach, taki swipe.
Tło podążające za myszką zwiększa dynamikę strony internetowej. Ciekawa funkcja.
Grzesiek ostatnio opublikował Kontenery standardowe
Witam,
istnieje możliwość opóźnienia animacji?
Mam pytanie, trochę związane z przesuwanymi tłami prezentowanymi w tym wpisie, ale nie do końca. Czy możecie polecić jakąś stronę z płatnymi (liczę na jakość) szablonami do Joomla albo Wordpressa z tzw. parallax scrollingiem tła?
Witam no bardzo fajny pomysł z tymi tapetkami. Z pewnością mi się przyda i musze powiedzieć, że nie wiedziałem, że takie coś w ogóle istnieje. Dodatkowo fajnie zostało to wszystko opisane pozdrawiam.
Lubię wszelkie bajery i to mi się podoba, ha! 🙂 Pokombinuję z czymś takim. I z tym minusem, żeby tło poruszało się w kierunku przeciwnym. Ale nie wiem czy zdecydowałbym się na coś takiego na stałe, nie każdemu użytkownikowi może się to podobać, niektórych może rozpraszać. No ale tak na trochę to się zdecyduję 🙂
Ja to w ogóle gubię się w tej całej technologii. Myślałem do tej pory, że istnieją tylko myszki z takim światełkiem, które miga i pokazuje, czy myszka działa, czy może nie. Jak teraz przeczytałem ten wpis i dowiedziałem się, że jest taka możliwość jak tło podążające za ruchem myszki to zdecydowałem się, na poszukanie takiej myszki, która takie coś potrafi.
Przecież sprzęt tu nie ma nic do rzeczy… Całość jest oparta na pozycji kursora myszy w oknie przeglądarki.
Ale bajer 🙂 No i w sumie nie jest to tak skomplikowane do wykonania jakby się wydawało. Może i funkcjonalność takiego gadżetu na stronie nie jest duża, ale to taka “cieszynka” 😉 Teraz tylko szukać i kombinować z różnymi tapetkami 😉 Pozdrawiam serdecznie!
Kamil ostatnio opublikował Unijne etykiety opon
Bardzo przydatne 🙂
Siema
Chciałem się na początek przywitać. Bardzo fajnie , że właśnie znalazłem tą stronkę, szukałem podobnych,ale niestety wszystkie są podobne , lecz nie było nic właściwego. Zawsze z tym nie mogłem dojść do ładu. Dzięki jeszcze raz pozdrawiam
Lepsze pytanie to do czego to wykorzystać? 🙂
Dominik ostatnio opublikował Aplikacja Pocket
Ale fajna sprawa! Z pewnością użyje tego triku w przyszłości.
Bartek ostatnio opublikował Dieta dla cukrzyków
Super! Szukałem tego od kilku dni. Kod niby prosty a męczyłem się z tym strasznie. Wielkie dzięki.
Świetny post ! na pewno kiedyś się przyda. Pozdrawiam.
Świetnie, dzięki! 🙂
Krzysztof ostatnio opublikował Jakich błędów się wystrzegać przy sprzedaży mieszkania
Bardzo fajny post na pewno się przyda 🙂
Dzięki za pożyteczną wskazówkę, na pewno przyda się w przyszłości 🙂
zastanawiam się tylko, na ile taki bajer jest na stronie potrzebny?
ceag ostatnio opublikował Przeciwwybuchowa skrzynka zaciskowa