Учебники

Параллакс-скроллинг в веб-дизайне – Основные понятия

Теперь, когда мы поняли происхождение и происхождение Parallax, давайте разберемся с историей и концепцией прокрутки Parallax в веб-дизайне.

Определение

Согласно Википедии, прокрутка параллакса – это техника в компьютерной графике, в которой фоновые изображения перемещаются мимо камеры медленнее, чем изображения переднего плана, создавая иллюзию глубины в 2D-сцене и добавляя ощущение погружения в виртуальный опыт.

Параллакс-скроллинг использовался в первые дни анимации. Многие анимационные студии (например, Disney) использовали многоплоскостные камеры для достижения эффекта параллакса.

Поскольку технологии компьютерной графики развивались вместе с такими передовыми средами, как JavaScript, веб-дизайнеры и разработчики теперь могут создавать сайты с богатым опытом. Хотя параллаксная прокрутка началась с нескольких слоев, она была перенесена на следующий уровень с помощью полос прокрутки в компьютерах. Техника осталась прежней, но благодаря ее применению для прокрутки был создан уникальный опыт.

Примеры

Скроллинг параллакса широко используется на современных веб-сайтах. Поскольку одновременная прокрутка параллакса может быть реализована как для мобильных, так и для настольных сайтов, популярность таких сайтов в последние годы резко возросла.

Некоторые примеры сайтов, использующих параллаксную прокрутку, приведены ниже –

Беар Гриллс

Беар Гриллс

По мере продолжения анимации вы сможете увидеть, как содержимое веб-сайта становится интерактивным. По мере продвижения вперед будет появляться все больше и больше информации.

Заработай деньги

Заработай деньги

Чтобы познакомить читателя с преимуществами кредитного союза, этот сайт познакомит вас с сюжетом. По мере продвижения вперед информация раскрывается уникальным способом.

ИнфоКвест Инфографика

ИнфоКвест Инфографика

Путешествие сотрудника в поисках критической информации на его рабочем месте изображено с помощью прокрутки.

GitHub 404

GitHub 404

Это немного отличается от обычного опыта параллакса: объект в верхней части экрана перемещается при наведении на него указателя мыши.

Применение Parallax Scrolling

К настоящему времени из определения и предыстории должно быть ясно, что параллаксная прокрутка полезна для широкого спектра цифровых носителей. Некоторые из приложений – параллаксная прокрутка ниже –

Дизайн игры

Параллакс-скроллинг широко используется в игровом дизайне. Персонаж должен двигаться относительно фона, и с помощью управления игроком, используя мышь и клавиатуру, весь опыт должен измениться. Дизайн игры – очень примитивный, но модный способ использования параллакс-скроллинга.

Веб-сайты

Чтобы пользователь был захвачен сайтом, важен некоторый динамический и разный опыт. Как вы могли заметить из примеров сайтов, обсуждавшихся выше, прокрутка параллакса добавляет контенту его интерактивное представление.