03:33 Знакомство с 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.  Наверняка вы замечали, что при прокрутке страницы сайта вниз, элементы, находящиеся на этой самой странице, движутся с разной скоростью. Давайте, в качестве примера, обратим внимание на страницу, которая отображена сверху на картинке. Во время прокрутки страницы вниз вы заметите нечёткие голубые точки на фоне, которые двигаются с такой же скоростью, что и полоса прокрутки. А группа более сфокусированных точек, которые расположены на переднем плане, двигаются немного быстрее. И, если заметите, текст “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” и главный заголовок страницы “Products” двигаются ещё быстрее. И, конечно же, многочисленные по размеру изображения самого продукта, в фокусе и его отсутствии. Те, что расположены в зоне без фокуса, являются фоновыми, и двигаются они вместе с текстом, в отличие от тех больших и сфокусированных изображений на переднем плане – они двигаются быстрее этого текста. Все это определённо точно демонстрирует нам Parallax-скроллинг, когда разные слои изображений движутся с разной скоростью и в итоге накладываются друг на друга во время прокрутки страницы, тем самым создавая эффект трёхмерности. Ещё один важный момент: давайте вспомним первые игры Nintendo, чтобы убедиться в том, что Parallax-скроллинг не ограничивается вертикальным и горизонтальным скроллингами. В тех играх обычно движение героев было по горизонтали вдоль экрана, слева направо, а не так, как на сайте Activate – вертикально вниз. А теперь перенеситесь на MarkioKart Wii, чтобы поговорить о разных интересных штуках, какие там есть.  Изначально кидается в глаза то, что направление скроллинга страницы горизонтальное. Это все классно, но не является новым концептом. Также обратите своё внимание на параллакс-эффект с динозавром Йоши и панцирями, располагающимися на фоне. На переднем плане разместился основной контент и Луиджи с Марио, которые во время прокрутки смещаются на разных скоростях. Однако, как только вы дойдёте до #highlights и #attack, траектория смещения уже не будет ровной. Также происходит и во время перехода между страницами #rediscover и #snes: у изображений меняется направление смещения на вертикальное, при этом сохраняется различная скорость. Прошу заметить, что вы не обязаны ограничиваться лишь созданием искусственного 3D-эффекта при использовании параллакса на вашем собственном сайте. Как пример – Webseitenfactory, сайт немецкой студии веб-дизайна, на котором отлично представлено использование параллакса, чтобы добавить разные эффекты на страницу (например, уменьшение или увеличение сайта благодаря скроллингу, движение иконок в разных направлениях и т.д.).  А что если ваш сайт практически мёртв, не наполнен контентом, за исключением раздела about us, mission statement и контактной информации, и вам его обязательным образом нужно оживить? Используйте в этих целях Parallax-скроллинг. Все это можно объединить в одностраничный сайт, конечно же, при определённых условиях, однако не уверен, что он запомнится вашим посетителям. Но что если перенять идею параллакса, которая есть на Spring/Summer?  Первое моё впечатление было: «Ммм, очень симпатично!», но, после скроллинга моё впечатление изменилось на «Wow, это обалденный сайт!». Как сделать страницу не просто неплохой, а запоминающейся? Ответ прост: добавить Parallax-эффект. Parallax-скроллинг – это отличная техника, которую можно использовать в любой момент, независимо от того, какой сложности сайт вы создаёте, будь это одностраничный сайт-визитка, или же сложный мультистраничный сайт. | |
|
| |
| Всего комментариев: 0 | |
