Что такое параллаксная прокрутка?

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

Параллакс («параллакс» происходит от греческого слова παράλλαξις (parallaxis), что означает «чередование») означает смещение объекта из-за изменения точки зрения наблюдателя. Классический пример можно привести на примере большого пальца:

1. Держите большой палец на расстоянии нескольких дюймов от лица.
2. Сначала закройте левый глаз, затем переведите взгляд на правый.

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

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

Если вы будете двигать головой справа налево, то вскоре увидите, что относительное положение объектов в вашем поле зрения меняется. Близкие объекты перемещаются перед более далекими и скрывают их. Кажется, что объекты на переднем плане движутся быстрее, чем объекты на заднем плане, которые почти не движутся. Этот эффект особенно заметен во время поездок на поезде или автомобиле.

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

Это явление иллюстрирует следующее видео:

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

Психологи, изучающие восприятие, называют эту (кажущуюся) разницу в скорости «параллаксом движения». Световые отражения от близких объектов движутся по сетчатке быстрее, чем отражения от объектов, расположенных дальше. Поскольку эффект возникает только в том случае, если наблюдатель движется параллельно рассматриваемым объектам, он известен как восприятие глубины, вызванное движением. Другими зрительными стимулами, способствующими восприятию трехмерного пространства, являются вариации текстуры, конвергенция перспективы, атмосферная перспектива, постоянство величины, а также маскировка и наложение.

Разработчики игр использовали эффект параллакса движения со времен игр с боковой прокруткой 1980-х годов для создания трехмерного эффекта с помощью двухмерных средств. Традиционные игры в жанре «прыгай и беги» или «стреляй вверх», такие как Super Mario, Moon Patrol или Jungle Hunt, состоят из переднего, среднего и фонового уровней, которые движутся по экрану с разной скоростью. В то время как передний и задний планы постоянно движутся в одном направлении, игрок может перемещать игровую фигуру по своему усмотрению. Ощущение глубины создается благодаря тому, что передний план движется по экрану быстрее, чем фон. Это сделано для того, чтобы усилить ощущение погружения во время игры. Приведенный ниже демонстрационный ролик классического шутера «Лунный патруль» показывает, как это выглядит на практике.

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

С конца 2000-х годов эффект параллаксной прокрутки стал использоваться и в веб-дизайне. Сайт с параллакс-прокруткой nikebetterworld.com (больше не работает), созданный в 2011 году, привлек большое внимание СМИ.

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

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

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

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

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

Технически сайты с параллакс-прокруткой могут быть реализованы даже с помощью основных веб-стандартов, таких как язык гипертекстовой разметки (HTML) и каскадные таблицы стилей (CSS), которые предоставляют разработчикам широкие возможности анимации в современных версиях, HTML5 и CSS3. Например, вы можете использовать простой эффект параллакс-прокрутки с помощью CSS-свойства attachment. Если его использовать вместе с фиксированным значением, выбранный элемент останется в фиксированном положении, в то время как другие элементы будут двигаться в направлении прокрутки. Если вы хотите задать разную скорость прокрутки для слоев переднего плана и фона, вам понадобятся дополнительные веб-приемы.

В следующем видеоуроке от ютубера Дрю Райана показано, как можно реализовать движущиеся слои на неподвижном фоне с помощью HTML5 и CSS3.

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

Для улучшения восприятия глубины более сложные сайты с параллакс-скроллингом используют язык сценариев JavaScript или JavaScript-фреймворк jQuery. Они предоставляют различные функции, которые можно использовать для определения того, как именно должны вести себя отдельные слои сайта при прокрутке. В этом случае эффекты прокрутки, основанные на JavaScript, не нужно программировать с нуля. В Интернете вы найдете различные программные проекты, которые предоставляют вам эффекты параллакса и другие анимации в виде легко интегрируемых плагинов. Среди наиболее известных проектов — SuperScrollorama, ScrollMagic и skrollr.

• SuperScrollorama Джона Полачека: jQuery-плагин SuperScrollorama основан на Greensock Animation Platform (GSAP) и был разработан Джоном Полачеком в сотрудничестве с Яном Паэпке. Плагин предлагает различные возможности анимации для элементов сайта и уже давно является стандартным решением для прокручиваемого веб-дизайна. SuperScrollorama рассматривает скроллинг-бар как своего рода прогресс-бар, в котором выстраиваются желаемые анимации. Если посетитель сайта достигает заранее заданной точки во время прокрутки, срабатывает эффект. Плагин по-прежнему доступен для загрузки, но в настоящее время он не развивается. Вместо этого разработчики сосредоточились на проекте ScrollMagic. SuperScrollorama находится под лицензией MIT и GPL.

• ScrollMagic от Jan Paepke: ScrollMagic — это полная переработка jQuery-плагина SuperScrollorama. ScrollMagic полагается на jQuery и Greensock Animation Platform (GSAP). Однако они не входят в состав программного ядра и должны быть предоставлены отдельно. В качестве альтернативы GSAP можно использовать анимационный движок Velocity.js. ScrollMagic предлагает все анимационные эффекты, зависящие от полосы прокрутки, что и его предшественник, и расширяет его функциональный спектр за счет улучшенной производительности, поддержки отзывчивого дизайна и мобильных устройств, а также объектно-ориентированного программирования. В дополнение к разнообразным эффектам параллакс-прокрутки, ScrollMagic предлагает функцию бесконечной прокрутки, которая загружает содержимое веб-страницы в бесконечном цикле с помощью Ajax. Как и его предшественник, ScrollMagic находится под двойной лицензией (MIT и GPL).

• skrollrby Alexander Prinzhorn: Skrollr также использует слайд-бар в качестве отправной точки для анимационных эффектов. Легкий плагин включает только библиотеки JavaScript и CSS и полностью обходится без jQuery (Vanilla JS). Знание языка сценариев не является обязательным требованием для использования приложения, но опыт работы с CSS3 и HTML5 обязателен. Программа skrollr подходит для настольных веб-сайтов и поддерживает мобильные веб-браузеры, а также Android и iOS. Пользователям следует обратить внимание на то, что проект активно не развивается с 2014 года. Поддержка более новых веб-браузеров не гарантируется. Программа доступна для скачивания под лицензией MIT.

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

Проект, преуспевший в этой области, — это маркетинговый веб-сайт для Peugeot Hybrid4, который выполнен в виде графического романа и использует множество интересных особенностей (на момент публикации) новой технологии привода в форме захватывающей истории с картинками.

Концепция и дизайн одностраничного сайта были разработаны компанией BETC Digital в сотрудничестве с иллюстратором MARVEL Джеральдом Парелом. Техническая реализация была осуществлена французским цифровым агентством 60fps под руководством Сильвена Трана.

Онлайновый графический роман предоставляет посетителям два способа навигации по веб-страницам: те, кто не хочет постоянно прокручивать страницу, могут активировать режим автовоспроизведения. Это означает, что анимированные элементы веб-страницы будут автоматически воспроизводиться без участия пользователя. В дополнение к эффекту параллакс-прокрутки на сайте используется звуковое оформление, управляемое полосой прокрутки.

Технически фронтенд основан на HTML5, CSS и JavaScript. Проект был удостоен награды FWA of the Day от сайта The FWA.

Аналогичное использование эффекта параллакс-скроллинга можно увидеть на сайте инструмента для подбора паролей для iOS, Ben the Bodyguard (приложение больше не доступно).

Посетители одностраничного сайта сопровождают Бена через мрачную уличную сцену и сталкиваются с некоторыми страхами цифровой эры: незащищенные фотографии и контактные данные на смартфоне. Не стоит беспокоиться, ведь Бен выступает в роли телохранителя вашего телефона и защищает конфиденциальные данные от опасностей Интернета с помощью надежного 256-битного шифрования.

Берлинское креативное агентство Nerd Communications является идейным вдохновителем инструмента для создания паролей и веб-сайта. При создании этого веб-сайта с одним пейджером разработчики использовали различные инструменты, библиотеки и фреймворки, такие как jQuery, HTML5 Boilerplate и Adobe Flash. Прокрутка с эффектом параллакса основана на платформонезависимом Javascript-скроллере iScroll, разработанном Маттео Спинелли.

Одностраничный сайт был частью кросс-медийной маркетинговой кампании по представлению инструмента для подбора паролей. Главный герой, Бен, встречает заинтересованных людей на YouTube в трейлере, в различных социальных сетях, а также на пользовательском интерфейсе приложения. Benthebodyguard.com также смог получить от FWA титул FWA of the Day. В настоящее время приложение исчезло из App Store.

CableTV.com, информационная платформа о кабельном телевидении США, также использовала параллакс-скроллинг в своем повествовании. The Walking Dead Zombiefied — это интерактивная инфографика о культовом сериале канала AMC.

В форме виртуального комикса одностраничный сайт иллюстрирует, как актер превращается из обычного человека в нежить (в сериале он известен как Ходячий).

Посетители сайта следят за сюжетом, прокручивая его с помощью мыши. Различные слои на сайте Parallax проходят горизонтально мимо точки обзора. Новое содержимое автоматически перезагружается. Звуковые эффекты и мрачная музыка, играющие в такт прокрутке, создают постапокалиптическое настроение.

По словам команды разработчиков, источником вдохновения для создания страшного сайта Zombie послужила презентация компании американского поставщика услуг безопасности ADT, у которой на сайте yourlocalsecurity.com есть временная шкала с эффектом параллаксной прокрутки.

Технической основой одностраничников является JavaScript-плагин skrollr.js. Создатели фильма The Walking Dead Zombiefied показывают, как быстро можно создать параллакс-сайт с оптикой видеоигры. Информацию вы найдете в записи блога на Dev.Opera.com.

В NASA также поняли, что сайты со скроллером — это идеальный способ предоставления информации в Интернете в развлекательной форме. На информационно-развлекательном сайте nasaprospect.com американское космическое агентство приглашает посетителей в путешествие по Солнечной системе, используя эффект параллаксной прокрутки для представления огромных просторов. Посетитель сайта входит в роль исследователя космоса и прокручивается от планеты к планете, в то время как звезды проносятся мимо на заднем плане.

Сайт был разработан в сотрудничестве со студентами-дизайнерами из Университета Южной Дакоты и участниками международного молодежного конкурса «Люди в космическом искусстве». В дополнение к основным веб-технологиям HTML5, CSS3 и JavaScript были использованы библиотеки: Modernizr, LESS, Bootstrap, Require, jQuery, Signals, SoundManager2, а также Greensock Tweening Engine. Эффект параллакс-скроллинга основан на jQuery-плагине stellar.js Марка Далглиша. Исходный код сайта доступен на GitHub под лицензией MIT. Проект был отмечен за креативный, инновационный веб-дизайн различными премиальными сайтами, такими как The FWA, Awwwards.com и CSSDesignAwards.com.

Эффект параллакса также привлекает внимание, когда посетитель впервые заходит на страницу, поскольку его поражает стилистика дизайна и потенциал, который он имеет для того, чтобы рассказать историю разными способами. Ярким примером является сайт видеоигры Firewatch от Campo Santo.

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

Различные веб-учебники и примеры кода показывают, насколько хорошо эффект параллакса на сайте Firewatch воспринимается интернет-сообществом. Здесь вы найдете пошаговые инструкции, которые позволят вам повторить этот дизайн. Например, вы найдете демонстрацию на CodePen.io.

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

Посетителю сайта представляется забавная картинка: два зануды из начальной школы с ситечками на головах. Рядом с ними стоит обезьяна, делающая заметки. Когда вы прокручиваете страницу вниз, фотография исчезает из поля зрения. Эта оптическая «изюминка» также сопровождается зеленой полосой загрузки, которая ползет по экрану по мере загрузки сайта. Не очень удачный дизайн.

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

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

Даже если эффект параллакса в принципе можно автоматизировать, большинство разработчиков одностраничных сайтов с соответствующей анимацией полагаются на навигацию, при которой посетители сами управляют прокруткой. Однако существует предел того, насколько посетитель готов прокручивать страницу. Примером сайта, который испытывает терпение посетителей, является ihatetomatoes.net. Веб-сайт, используемый для 25^25-го 25-летию Gameboy, не использует параллакс-эффект, но требует от посетителя много прокрутки.

Одностраничный сайт действует как рекламная кампания. Желающие регистрируются на сайте ihatetomatoes.net, чтобы получить учебник по основным возможностям анимационного плагина ScrollMagic. Сначала посетители видят Gameboy на сером фоне, а когда они прокручивают страницу вниз, Gameboy становится больше и начинается игра в Тетрис. Однако зритель не может играть в игру и должен продолжать прокрутку, наблюдая за тем, как блоки складываются на экране Gameboy. Внизу сайта вы увидите ссылку на видеоуроки, за которые нужно платить.

Страница 404 ошибки GitHub (источник: ‘https://github.com/404’) — это пример параллакс-эффекта без необходимости прокрутки. Она ведет себя так же, как и параллакс-сайт, но посетителю не нужно прокручивать страницу, вместо этого ему нужно просто перемещать курсор.

За параллакс-анимацию отвечает jQuery-плагин Plax. Этот плагин был разработан Камероном МакЭфи и свободен для использования через GitHub по лицензии MIT. Что особенного в Plax: плагин Parallax переворачивает восприятие посетителей сайта с ног на голову. Здесь передний план не движется быстрее фона — скорее фон движется быстрее переднего плана. Цель — дезориентировать зрителя, что вполне уместно, поскольку посетитель, вероятно, уже запутался после того, как был перенаправлен на эту страницу ошибки.