параллакс скроллинг

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

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

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

Одна из самых модных тенденций веб-дизайна на сегодняшний день —  инструмент параллакс-скроллинга, который создает 3D-эффект при прокрутке страницы вниз.

1. Параллакс-скроллинг: сайт The Dangers of Fracking

параллакс-скроллинг как сделать

Следуйте за каплей воды сквозь гидравлический разрыв пласта. [гидравлический разрыв пласта используется для извлечения нефти и газа или их более активного выхода на поверхность. Ред. ]

Дизайнер Linda Dong создала пользовательский интерфейс и написала код для сайта, где процесс ГРП (гидравлического разрыва пласта) объясняется при помощи одной капли воды, которая проходит через весь сайт. Учитывая споры вокруг этого процесса добычи, лендинг предоставляет довольно сдержанные объяснения последствий ГРП в сочетании с яркой, дружественной графикой.

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

2. Savse Smoothies

параллакс скроллинг примеры

Savse Smoothies создали сайт, который популяризирует здоровый образа жизни

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

3. Rimmel London

параллакс скроллинг как сделать

Компания Rimmel London получила награду за свой сайт с параллакс-скроллингом

Косметический гигант Rimmel обзавелся удивительным веб-сайтом, где демонстрирует свои всемирно известные изделия при помощи эффекта параллакс-скроллинга. Три года назад этот сайт вошел в 20-ку лучших сайтов с параллаксом по версии Awwwards.

И это неудивительно.

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

4. Whiteboard

параллакс скроллинг примеры

Whiteboard используют большие видео, которые автоматически воспроизводятся

Креативным агентством Whiteboard движет желание обеспечить работу для перспективных предприятий. Они считают, что персональный подход к бизнесу принесет лучшие результаты для всех. Для таких «дальновидных» компаний, логично предположить, что они изучают сравнительно новый мир параллакса в веб-дизайне и активно его используют.

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

5. Scroll For Your Health

параллакс скроллинг

«Скроллинг по вашему здоровью» «оживляет» фрукты при помощи выразительной графики.

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

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

6. Alquimia WRG

параллакс скроллинг как сделать

Alquimia WRG используют параллакс элементы, чтобы создать 3D эффект космического пространства

Основанное в Милане, Alquimia WRG — это цифровое агентство, которое стремится создавать удивительные и эффективные инструменты для брендов на цифровых носителях. При создании сайта использовались обычные HTML5, CSS и JavaScript и минимализм в цветах (только черный и белый).

«Элемент Canvas в HTML5 используется для анимации начальной загрузки изображения. Тонкий параллакс элементов домашней страницы создает динамику, а анимация и 3D имитируют космическое пространство, когда мышь двигается».

Андреа Бьянки, креативный директор Alquimia

Навигация по страницам осуществляется при помощи простого и мягкого скользящего эффекта, который реализуется путем изменения свойств CSS с помощью JavaScript.

Когда определенный контент загружен, анимация предварительной загрузки в JavaScript отображается в нижней части экрана, что является приятной чертой.

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

07. The Royal British Legion

параллакс скроллинг примеры

The Poppy Appeal используют иллюстрации и анимацию, чтобы предоставлять обучающую информацию как детям, так и взрослым

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

Иллюстрированные анимации облегчают восприятие и способствуют обучению как молодых, так и взрослых зрителей. Основатель и создатель проекта Robbie Greatrex называет своим любимым элементом сайта — телевидение.

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

P.S.

Надеемся, что эта подборка станет для вас источником вдохновения для своих собственных проектов посадочных страниц. Если мы не упомянули какие-то варианты использования параллакса, то хотелось бы услышать о них от вас в комментариях.