—»     —»   Знакомство с Parallax Scrolling
  Раздел: Анимация, Web-дизайн   Нет комментариев  

Знакомство с Parallax Scrolling



Каждый, кому довелось наблюдать за игрой друзей, или даже играть в игры, которые были выпущены в 80-90-х годах – знает, что такое техника Parallax-скроллинг.

Давайте вспомним такие игры, как Mario Bros, Mortal Kombat, Street of Rage, Turtles in Time, или же оригинальную игру Moon Patrol. Именно тогда, когда определённое количество фоновых слоёв с многочисленными текстурами двигаются на разных скоростях (что и создаёт эффект трехмерного пространства), наблюдается та самая Parallax-техника.

Как вы думаете, почему я заговорил о ретро-играх именно в статье о веб-разработке? Хотелось бы ответить, что «просто они клеевые», но дело не совсем в этом. Parallax-скроллинг – это замечательный дизайнерский концепт, в первую очередь, который активно продвигается в мир веб-дизайна. Одни из первых, кто успешно использовал эту технику – это Nike. Для разработки своего оригинального сайта Nike Better World они решили нанять таких маркетинговых гигантов, как Weiden and Kennedy. С тех пор, оригинальный сайт Nike Better World был обновлён и изменён, но раз уж тема зашла о первом Parallax-дизайне от Nike – хочу отметить, что есть достаточно схожий на него сайт, который представляет спортивные напитки Activate.

Знакомство с Parallax Scrolling

Наверняка вы замечали, что при прокрутке страницы сайта вниз, элементы, находящиеся на этой самой странице, движутся с разной скоростью. Давайте, в качестве примера, обратим внимание на страницу, которая отображена сверху на картинке. Во время прокрутки страницы вниз вы заметите нечёткие голубые точки на фоне, которые двигаются с такой же скоростью, что и полоса прокрутки. А группа более сфокусированных точек, которые расположены на переднем плане, двигаются немного быстрее. И, если заметите, текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products” двигаются ещё быстрее. И, конечно же, многочисленные по размеру изображения самого продукта, в фокусе и его отсутствии. Те, что расположены в зоне без фокуса, являются фоновыми, и двигаются они вместе с текстом, в отличие от тех больших и сфокусированных изображений на переднем плане – они двигаются быстрее этого текста. Все это определённо точно демонстрирует нам Parallax-скроллинг, когда разные слои изображений движутся с разной скоростью и в итоге накладываются друг на друга во время прокрутки страницы, тем самым создавая эффект трёхмерности.

Ещё один важный момент: давайте вспомним первые игры Nintendo, чтобы убедиться в том, что Parallax-скроллинг не ограничивается вертикальным и горизонтальным скроллингами. В тех играх обычно движение героев было по горизонтали вдоль экрана, слева направо, а не так, как на сайте Activate – вертикально вниз. А теперь перенеситесь на MarkioKart Wii, чтобы поговорить о разных интересных штуках, какие там есть.

Знакомство с Parallax Scrolling

Изначально кидается в глаза то, что направление скроллинга страницы горизонтальное. Это все классно, но не является новым концептом. Также обратите своё внимание на параллакс-эффект с динозавром Йоши и панцирями, располагающимися на фоне. На переднем плане разместился основной контент и Луиджи с Марио, которые во время прокрутки смещаются на разных скоростях. Однако, как только вы дойдёте до #highlights и #attack, траектория смещения уже не будет ровной. Также происходит и во время перехода между страницами #rediscover и #snes: у изображений меняется направление смещения на вертикальное, при этом сохраняется различная скорость.

Прошу заметить, что вы не обязаны ограничиваться лишь созданием искусственного 3D-эффекта при использовании параллакса на вашем собственном сайте. Как пример – Webseitenfactory, сайт немецкой студии веб-дизайна, на котором отлично представлено использование параллакса, чтобы добавить разные эффекты на страницу (например, уменьшение или увеличение сайта благодаря скроллингу, движение иконок в разных направлениях и т.д.).

Знакомство с Parallax Scrolling

А что если ваш сайт практически мёртв, не наполнен контентом, за исключением раздела about us, mission statement и контактной информации, и вам его обязательным образом нужно оживить? Используйте в этих целях Parallax-скроллинг. Все это можно объединить в одностраничный сайт, конечно же, при определённых условиях, однако не уверен, что он запомнится вашим посетителям. Но что если перенять идею параллакса, которая есть на Spring/Summer?

Знакомство с Parallax Scrolling

Первое моё впечатление было: «Ммм, очень симпатично!», но, после скроллинга моё впечатление изменилось на «Wow, это обалденный сайт!». Как сделать страницу не просто неплохой, а запоминающейся? Ответ прост: добавить Parallax-эффект.

Parallax-скроллинг – это отличная техника, которую можно использовать в любой момент, независимо от того, какой сложности сайт вы создаёте, будь это одностраничный сайт-визитка, или же сложный мультистраничный сайт.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 11447   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31