Чтобы сделать сайт живее, многие добавляют туда анимированные иконки, фоны и другую графику. Но есть более интересный и необычный способ создать на сайте движение, объем и глубину — добавить туда эффект параллакса, иллюзию объемного пространства и движения.
Читайте полную версию статьи на сайте.
Что такое параллакс в дизайне
Что такое параллакс? Это смещение близкого объекта относительно далекого при изменении угла зрения. Благодаря этому эффекту мы видим предметы в объеме, воспринимаем глубину и понимаем, что находится ближе, а что дальше.
На сайтах изображение плоское, и дизайнер может только создать иллюзию объема. В этом может помочь параллакс-эффект. Для его достижения нужно три вещи:
- «Удаленный» объект, например, фон, который движется медленнее.
- «Близкий» объект, который движется быстрее.
- Действие, которое запускает движение, например, скролл или перемещение курсора.
Чтобы создать эффект параллакса, нужно разделить картинку на несколько слоев и задать им разную скорость и диапазон движения в зависимости от скролла или перемещения курсора.
Для чего можно использовать параллакс-эффект
Эффект параллакса можно использовать в коммерческих сайтах с разными целями.
Добавить изюминку на сайт с небольшим количеством информации
Часто для презентации продукта, услуги или целой компании нужен просто лендинг Такие странички похожи друг на друга, и единственный способ выделиться среди конкурентов — применить какое-нибудь интересное дизайнерское решение.
Таким решением вполне может стать эффект параллакс — с его помощью можно оживить иллюстрации и текст и добавить сайту глубины без сложных дизайнерских изысков.
На главной странице Hotdot минимум информации, но она смотрится потрясающе благодаря горизонтальному параллаксу, который добавляет индивидуальности и динамики.
На сайте Madwell вообще почти нет текста, зато реализован красивый параллакс по движению курсора — выглядит живо и очень объемно, как будто смотришь на сайт в 3D-очках.
На сайте Culturalsolutions эффект параллакса незначительный, зато он тут есть и при движении мыши, и при скролле — это добавляет сайту очарования.
На сайте Dogstudio информации тоже мало, зато в самом центре композиции находится анимированный волк, который движется при смещении курсора и скролле. За счет комбинации параллакс-эффекта и классической анимации создается ощущение «живости».
На странице конструктора сайтов Tilda с примером параллакса продемонстрирован очень аккуратный параллакс-эффект. Он практически незаметен, но планеты движутся быстрее, чем фон и текст, за счет чего создается ощущение объема практически без анимации.
Выделить объект с помощью эффекта параллакса
Параллакс — отличный способ выделить один объект, «провести» его через всю страницу и вынести на передний план. На верхний «слой», который иллюзорно ближе всего к зрителю, нужно поместить ключевой объект, например, рекламируемый продукт — это поможет сделать на нем дополнительный акцент.
На сайте Teapot-creation параллакс-эффект выделяет рекламируемый объект. А поскольку они продают 3D-модель, это еще и помогает показать реальный объем.
На сайте Cyclemon в центре станицы находится велосипед. Он изменяется, но благодаря эффекту параллакса скользит вниз вместе со зрителем, всегда оставаясь на переднем плане.
Показать параллакс-эффектом динамику, движение и процесс
Если вы продаете не продукт, а услугу, ее лучше всего показывать в динамике, в процессе. С этим тоже поможет помочь эффект параллакса — он создаст иллюзию движения.
Сайт Putzengetal продает услуги по уборке, а уборка — это именно процесс. Параллакс-эффект помогает его проиллюстрировать. Еще здесь есть классная интерактивная анимация — на первом экране можно побросать мусор в корзину.
На Madebyshap эффект параллакса используется, чтобы продемонстрировать процесс разработки. Параллакс при скролле тут минимальный, очень ненавязчивый, но добавляет глубины.
На сайте Stedi тоже показан процесс, на этот раз доставки товара. Параллакс-эффект тоже добавляет объема и динамики — самолет летит, грузы доставляются.
Сайт Nasaprospect некоммерческий. Здесь создана крутая иллюзия движения — космонавт буквально летит вслед за курсором. А создаваемый параллаксом объем помогает создать иллюзию глубокого космоса.
Что на самом деле параллаксом не является
Не все понимают, что такое параллакс, поэтому за него часто принимают и выдают другие эффекты:
Простую анимацию. Например, когда текст или иллюстрации выплывают при скроллинге.
На сайте Pressles просто анимированы отдельные элементы. Это немного похоже на параллакс-эффект, так как анимация возникает при скролле, но смещения объектов относительно друг друга нет.
Анимированные картинки. Их помещают на первые экраны сайтов или на сам сайт в качестве иллюстраций.
На сайте Pitchfork есть история одной музыкальной группы. Здесь много анимированных фото и анимаций текста, но это не параллакс, так как объекты не сдвигаются относительно друг друга.
Анимацию при движении курсора или скролле. Когда анимирован один объект, но он не сдвигается относительно других и фона.
На сайте Airbnb много анимированных отдельных элементов, можно крутить земной шар, но поскольку нет нескольких слоев объектов, объема это не добавляет.
Анимацию картинок на статичном фоне. Это создает небольшую иллюзию глубины, но она гораздо слабее, чем при параллаксе.
Попробуйте добавить эффект параллакса на свой сайт — добавить хотя бы один слой с парочкой объектов. Это поможет вам немного оживить страницу и придать ей уникальности.