The parallax scrolling effect is a design technique that’s relatively new in development and web design. Over the past few years since it’s hit the scene though, it’s grown pretty popular in its own right, and with good reason, too.
Czym jest efekt paralaksy (Parallax Scrolling)
Parallax scrolling is a technique wherein your web page’s background image scrolls at a slower rate compared to the foreground image. It gives the user a unique sense of depth and action while scrolling through a page when used on a website.
Without Parallax Scrolling
The elements of the web page – the text, images, buttons, etc – all scroll at the same rate as the background.
With Parallax Scrolling
The background image scrolls at a different rate as the rest of the elements in the page.
Wpływ przewijania z paralaksą na użytkownika
Technika ta nie jest jednak zupełnie nowa – w tradycyjnej animacji stosowano ją już w latach 20. XX wieku. Wykorzystywano ją również w wielu klasycznych grach wideo, takich jak Super Mario Bros.
W dziedzinie projektowania stron internetowych to firmie Nike często przypisuje się miano jednej z pierwszych, które zastosowały przewijanie z paralaksą w 2011 roku. Od tego czasu termin „parallax scrolling” (czasami nazywany „tłem paralaksy”) stał się powszechnym pojęciem zarówno wśród projektantów, jak i programistów, stale zyskując na popularności.
Parallax scrolling as used in a version of Super Mario Brothers. Notice how the hills in the background move
in slightly varying speeds, as compared to Mario and the other characters in the foreground.
Co zyskuje na tym użytkownik
Wspaniałą cechą tego efektu jest to, że skłania użytkowników do interakcji z witryną, zwiększając zarówno zaangażowanie, jak i atrakcyjność strony. A kiedy zostanie wykonany poprawnie, efekt paralaksy może ożywić nawet najprostszą witrynę. Można go nawet użyć do stworzenia zachwycających narracji, które natychmiast wciągają wszystkich odwiedzających stronę.
Podziel się z nami swoją pracą!
A co Wy o tym sądzicie? Czy korzystaliście już z najnowszej funkcji tła paralaksy w PBS v4? Czy działa to na Waszą korzyść? Podzielcie się linkami do swoich prac lub zostawcie sugestie w sekcji komentarzy poniżej.
Udanego tworzenia stron!