Co to jest efekt paralaksy (Parallax effect) na stronach internetowych?
3 min
3 min
Na skróty
Możliwe, że nie wiesz, czym jest efekt paralaksy — albo kojarzysz go wyłącznie z lekcji fizyki. Na pewno jednak zdarzyło Ci się już z nim zetknąć. Projektanci witryn internetowych sięgają po niego na tyle często, że zdecydowaliśmy się poświęcić mu cały wpis. Na czym polega parallax effect i dlaczego stał się tak chętnie wykorzystywany? Odpowiedzi znajdziesz poniżej.
Parallax effect to tak naprawdę bardzo proste złudzenie optyczne, które opiera się na dwóch faktach:
Przy projektowaniu z natury dwuwymiarowej witryny WWW nie jesteśmy w stanie skorzystać z tego pierwszego zjawiska, ale z drugiego — jak najbardziej. Wystarczy tak zaprogramować znajdujące się na ekranie użytkownika elementy, aby przy scrollowaniu strony poruszały się one z różną prędkością.
Najczęściej projektanci spowalniają w ten sposób tło strony, pozwalając pierwszemu planowi poruszać się w szybszym tempie, „podążając” za wzrokiem przewijającego stronę użytkownika. Dzięki temu witryna staje się jednocześnie bardziej dynamiczna i zyskuje głębię — wrażenie trójwymiarowości. Im więcej warstw o różnych prędkościach poruszania się nałożymy — tym efekt paralaksy będzie silniejszy.
Ale to oczywiście wcale nie jedyny sposób na zbudowanie przestrzeni pomiędzy pierwszym a kolejnymi planami witryny. Tak naprawdę każdy ruch elementów tworzących górną warstwę pozwala uzyskać efekt paralaksy. Poszczególne elementy mogą obrać się, powiększać lub pomniejszać wraz z przewijaniem strony, pojawiać się… i znikać. Ważne, by robiły to niezależnie od tła, na którym się znajdują.
Parallax effect wykorzystać można praktycznie na każdej stronie — pod warunkiem że przypadkiem nie obciążymy jej zbytnio dodatkowymi efektami, co byłoby ogromnym błędem z perspektywy SXO!
Rozbudowane paralaksy świetnie sprawdzają się w projektach witryn typu one page. Przy ich pomocy możemy stworzyć m.in.:
Dynamiczne względem siebie warstwy nie tylko nadadzą takiej stronie głębi, ale także mogą być sposobem na opowiedzenie historii, którą użytkownik będzie odkrywał scrollując witrynę. Albo na to, by wizualnie podkreślić znaczenie wybranych elementów — na przykład zalet premierowego produktu czy samego przycisku call-to-action. Jeśli chcemy przekazać użytkownikowi więcej informacji, niż zmieściłby tradycyjny one pager — możemy je ukryć na warstwach, które wyświetlą się na ekranie dopiero wtedy, gdy użytkownik przewinie stronę do odpowiedniego punktu.
Bardziej ostrożnym trzeba być przy naprawdę rozbudowanych, „ciężkich” witrynach. Efektowne paralaksy wymagają wdrożenia dodatkowych skryptów, więc — jak już zasugerowaliśmy — mogą istotnie wpłynąć na czas ładowania strony oraz na płynność działania już w trakcie jej scrollowania. W takim przypadku być może warto jest zrezygnować z paralaksy — lub zatrzymać się na bardzo delikatnych efektach.
Na szczęście, wcale nie.
Jeśli projektujemy stronę bezpośrednio na „żywym” kodzie — bez pomocy kreatorów — elementy witryny możemy zdynamizować albo przy pomocy CSS-a, albo w JavaScript. Tworzenie animacji (bo ostatecznie efekt paralaksy uzyskujemy poprzez animowanie elementów) w arkuszach stylów będzie trudniejsze — ale pozwoli uzyskać nieco płynniejszy efekt.
Z kolei popularne kreatory stron — Wix, Webflow czy choćby polski WebWave — pozwalają zdefiniować animację każdego elementu witryny zaledwie kilkoma kliknięciami; w ich przypadku sprawa będzie więc jeszcze prostsza (choć nie uzyskamy tak dobrze zoptymalizowanego kodu, jak pracując bezpośrednio z CSS-em i JS).
A jak to wygląda w WordPressie? Parallax effect możemy zaimplementować na przykład przy pomocy jednej z przynajmniej kilkunastu wtyczek — lub posłużyć się już gotowym motywem ze zanimizowanym tłem.
Zawodowy copywriter oraz student psychologii na Uniwersytecie Warszawskim. W świecie marketingu internetowego równie mocno, co chwytliwe (i wartościowe) treści interesuje go dobry design. Gdy nie zajmuje się tworzeniem contentu, odkrywa perełki kina niezależnego i pracuje nad własnymi opowiadaniami.
