0,1
рейтинг
8 апреля 2012 в 21:56

Дизайн → Знакомство с Parallax Scrolling перевод

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

Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

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



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

Параллакс-скроллинг не ограничивается только вертикальным скроллом страницы или скроллингом по прямой линии. Отдадим право Nintendo для демонстрации идеального примера, подтверждающего это утверждение. Вспомните ранние игры Nintendo, где наши герои обычно двигались горизонтально слева направо вдоль экрана, а не вертикально вниз, как мы видели это на сайте Activate выше. Прокатитесь на MarkioKart Wii и давайте поговорим о некоторых клевых штуках, которые мы там можно увидеть.



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

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



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



Моим первым впечатлением было “О, этот сайт выглядит симпатично”. Но когда я начал его скролить, впечатление сразу же стало “Вау, этот сайт крут!”. Добавление простого параллакс-эффекта как раз делает разницу между неплохим и запоминающимся.

Параллакс-скроллинг — это хороший трюк, который можно держать в рукаве. И его всегда можно применить независимо от того, делаете ли вы сложный мультистраничный сайт, или же простой одностраничный сайт-визитку.

Примеры сайтов с параллаксом


Некоторые из них очень крутые, рекомендую ознакомиться:


Инструменты для создания параллакс-эффектов:




Туториалы по созданию сайтов с параллакс-эффектами (англ.):


Перевод: Scott Stanton
Александр Смолянинов @derSmoll
карма
108,5
рейтинг 0,1
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (35)

  • +3
    Буквально пару месяцев назад материала на эту тему было маловато или я плохо искал :)
    Хочу заметить, данный подход всегда требует оптимизации ибо при большом количестве слоев и(или) большом мониторе все начинается мягко говоря «подлагивать».
    • +1
      Тут в принципе нужен комплексный подход — начиная с продумывания общего дизайна и заканчивая оптимизацией
    • 0
      Ага. Сайт фольксвагена крашнул мне ФФ: с
  • +7
    artofflightmovie.com
    Просто шикарный скроллинг, даже не думал, что такое возможно.
    • 0
      Я его специально первой ссылкой вставил, чтобы никто не пропустил :)
      • 0
        Сайт крут но видео впечатлило еще больше. Уже тяну полнометражку.
        • 0
          Да. Фильм шикарен, картинка, звукоряд. Отпад одним словом…
        • 0
          Вертолетчики вообще без башенные, некоторые маневры вообще кажутся нереальными для вертолета…
          А вы тут про веб :)
        • 0
          Посмотрите еще 'That's it, that's all' — все о тех же ребятах.
  • 0
    В буржунетах эта тема уже довольно давно обсуждается. Ещё примеры:
    layrr.com
    www.soleilnoir.net/believein
    www.nike.com/jumpman23/aj2012
    www.tokiolab.it
    www.bagigia.com
    www.acuterays.com
    • 0
      По этим ссылкам не везде именно параллакс, но суть та же в целом.
  • +1
    Не успел как появится этот трюк, кажется после кросовок Nike, как он стал надоедать. Но это никого не остановило:

    сайт 2011 года www.360langstrasse.sf.tv/page/
    titanic.q-music.be/
    ikayzo.com/
    fundacionrafaelpombo.org/
  • +5
    Красиво, но ухитряется полностью загружать неслабый проц и при этом тормозить.
    • +12
      html5 готовится убить флеш.
    • +1
      Подтверждаю, в опере практически любой сайт из шапки = лагодром. С такого сайта хочется как можно скорее сбежать, чем оставаться на нем по дольше.
      • +3
        Опера начала ощутимо отставать по части хардварной оптимизации. 12-я версия должна исправить ситуацию, но когда она ещё будет…
        • 0
          Тут, скорее всего, еще проблема в том, что в Опере по-умолчанию включен плавный скролл, а значит ей приходится перерисовывать страницу в несколько раз чаще, чем, например, Хрому.
          В любом случае долго по таким сайтам ходить трудно — голова начинает болеть.
    • +2
      Да-да, на телефоне не посмотришь, на планшете тормозит, на ноутбуке тоже слайдшоу бывает. Только для промо-сайтов и годится, как видно
  • 0
    А мен понравилась страничка asustransformer.ru/201/
    Признавайтесь, кто делал?
    • –2
      Программисты…
    • 0
      Интересно, на тех планшетах сайт так же будет тормозить? Хоть бы минимальные системные требования для просмотра огласили.
      • +1
        На планшетах большинство из них некорректно будет работать, потому что в мобильных браузерах ивенты при прокрутке не будут срабатывать…
  • +1
    • 0
      Ух, почти 9мб при начальной загрузке
  • 0
    Тоже делал такую прокрутку (вверх, вбок, вниз). Пришел к тому что проще всего запить позиции точек вручную.
    Проблема было только с тем что весь контент на некоторых мониторах не помещаться, решил с добавлением дополнительных точек внизу контента.
    • +1
      Боже мой. Простите за мой русский…
  • 0
    Великолепная статья! Есть мысль как еще можно сделать такое, пойду пробовать)
  • +2
    Красиво, но для любителей скролить мышью это превращается в ад. На smartusa.com у меня палец устал.
  • +1
    Красиво, но большинство людей всё-таки используют колёсико мыши. Вся плавность скролла пропадает.
  • 0
    Красиво, но это все же чисто дизайнерская вещь, которая в добавок снижает юзабилити. Да и на работе на типичных офисных компах некоторые экземпляры порядочно тормозят.

    С другой стороны как дизайнерское решение для сайтов-презентаций очень даже ничего.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    У nike есть какой-то сайт классный с таким скроллингом.
  • 0
    В ряде случаев реализация ужасна. Возьмем первый же сайт в списке: activatedrinks.com/. В Хроме сильно тормозит на нетбуке, в Фаерфоксе зияет сообщение об ошибке (тормоза, конечно, и там), в Опере просто не видно толком ничего, в Эксплорере (девятом) вообще крашится страница. Добавим к этому общие неудобства навигации по странице. Вышеназванный пример даже как презентационный сайт не годится.
  • НЛО прилетело и опубликовало эту надпись здесь

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