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? Оправдала ли она ваши ожидания? Делитесь ссылками на свои работы или оставляйте предложения в комментариях ниже.
Удачного создания сайтов!