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.
Визначення паралакс-скролінгу
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.
Вплив паралакс-скролінгу на користувача
Утім, ця техніка далеко не нова: її використовували в традиційній анімації ще у 1920-х роках. Її також застосовували в багатьох класичних відеоіграх, таких як Super Mario Brothers.
Проте у сфері вебдизайну компанію Nike часто вважають однією з перших, хто застосував паралакс-скролінг у 2011 році. Відтоді термін «паралакс-скролінг» (іноді його називають «паралакс-фон/и») став звичним поняттям як серед дизайнерів, так і серед розробників, і його популярність невпинно зростає.
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.
Що це дає користувачеві
Чудова особливість цього ефекту полягає в тому, що він спонукає користувачів взаємодіяти з вашим сайтом, посилюючи як залучення, так і привабливість. І, якщо все зроблено правильно, паралакс-скролінг здатний оживити навіть найпростіший вебсайт. Його можна використовувати навіть для створення приголомшливих історій, які миттєво захоплюють увагу відвідувачів сайту.
Поділіться своєю роботою з нами!
Тож що ви думаєте? Чи ви вже спробували нову функцію паралакс-фону з PBS v4? Чи працює вона на вашу користь? Діліться посиланнями на свої роботи або залишайте пропозиції в коментарях нижче.
Успіхів у створенні сайтів!