Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

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

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

Особое значение параллакса

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

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

Единственный минус, о котором мы говорили неоднократно – параллакс не работает (работает плохо) на мобильных устройствах. Да обходные пути для этого есть, но о них расскажем чуть ниже. Теперь же давайте рассмотрим эффекты параллакса и его стили, которые применяются разными веб-дизайнерами, и которые придают сайту сногсшибательный вид.

Анимация для изменения

Если контент и дизайн в целом предполагают исторический рассказ, об истории изменения чего-либо, то параллакс найдет себе применение. С помощью него можно создать движение слоев во времени, пространстве или местоположении.

Так, например, porschevolution решили рассказать об истории автомодели от 1930 года до 2020 года. Параллельно с тем, как меняется внешний вид автомобиля, изменяется музыка, стилистика фотографий и прочее, и прочее. Сам же дизайн работает, только если пользователь прокручивает колесико мышки и неважно - вверх или вниз. Контент изучается и меняется вперед и назад. Даже музыка нужная подгружается.

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

Прокрути меня

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

Обычно для этого веб-дизайнеры размещают в нижней части экрана небольшую иконку с надписью (прокрутка) или ссылки меню, мигающие стрелочки вниз, вверх, вправо, влево и прочие интересные элементы микровзаимодействия. Если открыть сайт cabletv, то уже на титульной станице можно видеть небольшую стрелочку с надписью «scroll» и согласитесь, но многое становится ясным и понятным.  Но сам эффект параллакса проявляет себя именно после начала прокрутки, когда элементы и блоки начинают двигаться в разные стороны.

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

Движение цветов

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

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

Если же рассматривать сайт werkstatt., то веб-дизайнеры использовали только два цвета: белый и серый. Но эффект параллакса увидеть можно между элементами и текстовыми блоками. Более того, если на блоки навести курсор, то они также изменят свой цвет. Такое сочетание разных эффектов хорошо работает, потому как, в целом, дизайн сайта очень прост. А эти эффекты как раз и призывают пользователей листать страницу и изучать контент. То есть, нет какого-либо подавления эффектов, затерянности, аляповатости. Они словно бы на переднем плане, а все прочее – не более чем окружение.

Упрощение информации

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

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

Если посмотреть на сайт ресторана Le Duc, то можно увидеть, что для разных разделов меню используются отдельные блоки с текстом. Появляются же они в зависимости от того, что именно пользователь читает, заказывает и когда прокручивает страницу. В реалии анимация параллакса весьма скромна и проста. Обычный фон из рыбок, на котором перемещаются текстовые блоки, повествующие о меню ресторана и некоторые советы. Вот только выглядит это обилие текста настолько простым для визуального усвоения, что полностью исчезает чувство: «Как многа букв! Читать лениваааа!».

Визуализация реальности

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

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

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

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

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

Создание параллакса

Если возникает желание и необходимость «уложить в голове» все, что известно о параллаксе и начать его использование в своих проектах, то, наверное, самым интересным ресурсом может стать Parallax Scrolling Demo, где демонстрируются все возможные эффекты параллакса. Также небольшую техническую статью о создании параллакса в CSS  можно найти w3schools. Пример создания сам по себе простой, но с небольшой толикой знаний в создании анимации, можно доработать код.

Завершение

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

Если же даже заказчик/клиент не знает некоторых нюансов, а сайт он хочет весьма и весьма красивый, то можно для начала использовать эффект в каком-то одном месте, уголочке, заголовке и посмотреть, насколько он «приживется». Можно даже прописать отдельно кусочек кода для того, чтобы на мобильных устройствах параллакс будет заменяться обычным изображением. Тогда останется только наблюдать, как долго пользователи станут проводить время на данной странице. Если произойдет увеличение, то они с большой вероятностью рассматривают параллакс.

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

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

Как вам материал?