Параллакс эффекты сохраняют свою актуальность. Речь идет о специальной технике, когда фоновое изображение двигается медленнее, чем элементы переднего плана. Этот эффект можно применить на любом типе веб-сайта, его интересно создавать, и он увеличивает вовлеченность пользователей. Этот эффект не обязательно использовать на каждой странице — параллакс скроллинг станет отличной техникой для домашней страницы, привлекая внимание пользователей к СТА, или другому контенту.
Параллакс эффекты создают элемент глубины, расстояния и более сильное ощущение трехмерности, чем другие техники.
С другой стороны, параллакс эффекты не всегда работают на мобильных устройствах.
Ниже, я приведу 5 интересных вариантов параллакс эффектов и стилей.
1. Анимация, демонстрирующая изменения
Используйте параллакс эффект, чтобы показать изменения в проекте. Слои движения могут передавать отрезки времени или пространства.
Лучше всего, параллакс эффекты говорят об изменениях, когда они работают с контентом веб-сайта.
На примере выше, Porsche Evolution показывает изменения во времени в фоне, и новую модель машины на переднем плане каждого изображения. Музыка также меняется в зависимости от десятилетия.
Дизайн сайта заставляет пользователей продолжать скролить, потому, что вам интересно, как будет выглядеть следующая машина. Эта техника работает как в хронологическом, так и в обратном хронологическом порядке — даже музыка проигрывает соответствующий эпохе трек, когда вы возвращаетесь к просмотру более ранних моделей.
Sonance использует параллакс эффект чтобы продемонстрировать изменение в пространстве. Здесь, параллакс эффект является частью общего навигационного шаблона, и показывает пользователю его местонахождение в иерархии.
2. Способствует использованию прокрутки
Причина, по которой параллакс эффект может создать вовлеченность, заключается в том, что он способствует использованию прокрутки, заставляя пользователя взаимодействовать с дизайном более продолжительное время.
Большое количество дизайнов, использующих параллакс эффекты, включают в себя небольшую, но заметную подсказу, которая помогает пользователю понять, как начать взаимодействовать с дизайном, что делать дальше.
Для поощрения взаимодействия, веб-сайт Walking Dead использует нечто другое — скроллинг проводит пользователя по стилизованным под комиксы горизонтальным экранам.
3. Движение и цвет
Один из самых интересных способов использования параллакс эффектов заключается в использовании цвета в различных контентных «панелях». Изменение цвета и анимация могут выражать что-то новое. К тому же, цвет очень хорошо привлекает внимание пользователей.
Веб-сайт Werkstatt использует белый и серый цвета для основного дизайна, и слои параллакса между элементами и текстом, а наведение указателя мыши наполняет жизнью и цветом каждый проект.
4. Улучшение усвоения информации
Параллакс эффекты могут помочь упростить усвоение сложной информаций, или улучшить читабельность больших блоков текста. Примеры выше, показывают два разных примера применения этой концепции.
На странице «about», сайта Мелани Дэйвид находится длинное введение, при этом, элемент навигации «About», расположенный слева, не двигается во время прокрутки текста. Когда текст оканчивается, обе части страницы переходят к новой секции. Это отличное решение для случаев, когда блок текста длиннее, чем обозримый участок контента.
Ресторан Le Duc использует отдельные блоки для каждой секции меню. Анимация довольно проста, и помогает лучше усвоить информацию.
5. Визуализируйте цифровую реальность
Один из лучших способов применения параллакс эффектов заключается в том, чтобы помочь пользователю визуализировать то, что он не в состоянии увидеть. Дизайнеры всё чаще применяют комбинацию трехмерной и параллакс анимации, для создания более реалистичного опыта.
Один из классических примеров сайта, применяющих параллакс анимацию — сайт Seattle Space Needle. Они используют восходящую прокрутку, чтобы показать посетителю, как будет выглядеть город с высоты птичьего полета.
Параллакс прокрутка перемещает вас вверх по зданию, показывая СТА сообщения, и отличную панель навигации, которая отображает высоту. Этот дизайн показывает пользователю то, что было бы сложно представить без использования анимированных эффектов.
Заключение
Хотя параллакс эффекты модны и интересны, они не подойдут для всех проектов. Также, важно помнить о том, что некоторым пользователям будет сложно перемещаться по сайту, который содержит такую массу анимации.
Прежде, чем использовать параллакс эффекты, познакомьтесь со своими пользователями, и их предпочтениями. Начните с домашней страницы, и посмотрите на аналитику — всё ли работает как нужно (увеличение времени, проведенного на сайте, станет хорошим знаком того, что всё работает).
Используйте параллакс тогда, когда он хорошо работает с вашим контентом.
Перевод статьи Кэрри Казинс
