Параллакс принято считать SEO-убийцей. В условиях одностраничной архитектуры сайта практически невозможно управлять метаданными, ключевыми словами и заголовками H1. Но, являясь абсолютным злом с точки зрения поискового продвижения, параллакс в то же время выводит на новый уровень опыт пользовательского взаимодействия (user experience). Он улучшает структуру сайта, дозирует подачу информации, предоставляет пользователю полный контроль над направлением и скоростью изучения концепции.
Параллакс обеспечивает сайт мощным зарядом динамики. Исследование сайта в движении по ощущениям сравнимо с небольшим интерактивным путешествием. Оно буквально затягивает юзера, пробуждая живой интерес и доставляя массу положительных эмоций.
А ещё сайты с параллаксом очень удобно просматривать с мобильных телефонов и планшетов. В общем, потенциал данного инструмента настолько огромен, что ждать отказа от него в угоду SEO не приходится.
Отличительные черты нового параллакса
Современный параллакс-скроллинг - это уже не просто эффектный выезд элемента поверх фона. Это «бесшовный», непрерывный динамичный поток, в процессе которого сменяется цвет подложки, появляются и исчезают элементы анимации, видео, фото. Ключевое отличие нового параллакса от старого заключается в его цельности. Здесь не видна смена «экранов» при перемещении, наслоение элементов происходит максимально органично, гладко и незаметно.
HTML5 предоставляет веб-дизайнерам безграничный простор для творчества. Параллакс-скроллинг можно выстроить на базе модных сегодня плоских и материальных конструкций и смешать с любыми «спецэффектами».
Примеры сайтов с параллаксом
Как гласит истина, лучше один раз увидеть… Не поленитесь перейти по ссылкам на ресурсы из нижеприведённой подборки, чтобы понять, что такое параллакс 2019.
Голод в Америке в фактах и лицах
Здесь параллакс-прокрутка является неотъемлемой составляющей визуального повествования. Для того чтобы пройти путь к спасению вместе с четырьмя героями, придётся покрутить колёсиком. Обратите внимание на пример блестящей реализации кольцевой композиции сторителлинга.
Concussion Movie
Сайт представляет собой фантастический микс из анимированных иллюстраций, текстовых фрагментов и тонких геометрических направляющих. Последние прокладывают визуальный путь по проекту, обеспечивая преемственность и неразрывность повествования.
Freewrite
Пожалуй, самый стильный пример дизайна с параллаксом. Анимированная прокрутка не просто придаёт живость и фановость проекту, но и служит отличным связующим звеном между классикой и современностью, миром искусства и высоких технологий.
Cesetti Designer
Параллакс с эффектом «наезда фотокамеры» - нетривиальное решение, ожидать которого можно было только от дизайнера. Имитация приближения объектива реализована посредством 3D-смещений слайдов, но выглядит очень правдоподобно.
Сайт-открытка от ClickWise
Новый год во всём мире отмечают практически одинаково, но вы не покинете ресурс, пока не просмотрите салюты во всех мегаполисах. Цепляющая картинка, праздничная музыка и параллакс создают универсальную поздравительную открытку для жителей всех уголков планеты.
Ready Player One
Дизайн - на геймера-любителя, зато параллакс-прокрутка неожиданно ведёт вверх, а не вниз, как принято.
Our Bay on the Brink
Проект доказывает, что эффект параллакса применим не только к иллюстрациям, но и к видео. Сайт представляет собой завораживающее интерактивное путешествие, маршрут которого выложен из множества коротких роликов, анимированных GIF-файлов и смещающихся слайдов.
Сайт веб-студии Pixel Fox
Креативное агентство избрало для себя весьма необычный вариант онлайн-портфолио - иллюстрированную сказку о Пиксельлэнде. Роль движка, позволяющего перемещаться по сюжетной линии, здесь опять же выполняет параллакс-скроллинг.
Grab
Пожалуй, самый классический из современных примеров дизайна с параллаксом. Всё строго по канонам: движение элементов переднего плана опережает прокрутку фона. Элемент новизны и интерактивности на олдскульный проект привносит лишь анимация.
Maison Tamboite Paris
Линейная компоновка - это скучно. То ли дело скроллинг с эффектом тонировки фона, локальной анимацией и лёгким паралаксом!
Publicis90
Чтобы понять истинное значение фразы «бесшовный параллакс», непременно посетите этот сайт. Никакой смены кадров - одно плавно вытекает из другого.
True
Ещё один пример нестандартной самопрезентации. На сайте digital-агентства присутствуют чуть ли не все актуальные тренды веб-дизайна. Помимо параллакса, здесь можно наблюдать: полноэкранные видеофоны, тонированные фотоподложки, акцент на шрифты. И всё это более или менее гармонично уживается между собой.