Efekt paralaksy na stronie internetowej – jak to zrobić?

Efekt paralaksy na stronie internetowej – jak to zrobić?

Bardzo często wśród początkujących front-endowców pada pytanie jak osiągnąć efekt paralaksy. Użyć gotowego plug-inu JavaScript, próbować zrobić to przy pomocy CSS a może jeszcze jakoś inaczej? Moja odpowiedź brzmi: zrób to sam.

Efekt paralaksy z lekcji fizyki

Czym jest paralaksa? Najprościej rzecz ujmując jest to zjawisko optyczne polegające na zmianie odbioru położenia elementu, w zależności od punktu obserwacji. Na dwuwymiarowym o obrazie jakim jest strona internetowa, zjawisko paralaksy sprowadza się do wolniejszej lub szybszej prędkości zmiany pozycji elementu względem pozostałych elementów. W nowoczesnych projektach www często wykorzystuje się go do zwiększania atrakcyjności, działania na wyobraźnię i ogólny odbiór prezentowanych treści.

Jak to działa

Zaprezentowana przeze mnie metoda jest o tyle fajna, że mamy nad nią pełną kontrolę i możemy ją wykorzystać na dowolnym elemencie DOM. Koncepcja jest bardzo prosta:

  • CSS: position: absolute dla elementu, który będzie posiadał efekt paralaksy,
  • JavaScript: zdarzenie onScroll oraz funkcja scrollTop().

See the Pen Parallax effect by Michał Wilk (@devolk) on CodePen.


Zdarzenie onScroll wychwytuje moment, w którym użytkownik przewija stronę. W każdym takim zdarzeniu aktualizujemy zmienną scrolled czyli aktualną odległość od początku strony. Atrybut CSS top obliczamy mnożąc aktualną odległość od początku przez zadany współczynnik. Teraz wystarczy zaktualizować pozycję elementu.

Voila!

Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.