Сейчас сложно представить современный и актуальный дизайн сайта без динамики, анимаций или других интерактивных элементов. Хорошие пользовательские интерфейсы больше не содержат исключительно статических решений. Вы можете видеть различные анимации практически на любом сайте.
Очень многие дизайнеры и владельцы сайтов сейчас стараются не использовать статические, "неподвижные" дизайны, и все чаще реализуют интересные интерактивные решения на сайтах. И одно из таких решений — анимация при скролле (прокрутке) страницы. И этот способ разнообразить сайт довольно популярен!
Этот тренд такой популярный и часто встречающийся из-за того, что такая анимация делает статический скучный интерфейс сайта динамичным и интересным, при этом не жертвует свободным пространством и не загружает дизайн. Это простая и понятная анимация, которая легко воспринимается при чтении страницы пользователем (всегда помните о пользовательском опыте!).
Более того, анимация при скролле — отличный инструмент, когда вам нужно установить ненавязчивые точки фокуса. Такие динамичные элементы также могут вести вашу аудиторию от одной контрольной точки к другой. Этот способ имеет множество преимуществ, проверенных временем.
Давайте рассмотрим несколько интересных примеров современных сайтов с анимацией при скролле, чтобы вы могли вдохновиться и взять на заметку несколько вариантов реализации этой идеи.
Несмотря на то, что дизайн Limnia не может похвастаться выдающейся анимацией при прокрутке, это все еще прекрасный пример хорошего промо-сайта, который получил свежее дыхание благодаря этому тренду.
На сайте вы можете увидеть простые эффекты, запускаемые при прокрутке. А точнее, когда блок попадает в поле зрения, запускаются анимированные элементы: короткие красивые переходы изображений и контента. Этого достаточно, чтобы интерфейс выглядел современно и в то же время соответствовал бренду компании.
Кроме того, Limnia доказывает нам, что современные анимации с прокруткой — это не только большие тяжеловесные анимации. Сейчас идет тренд на небольшие, короткие эффекты.
В случае портфолио Стефано Де Розы мы можем видеть эффекты перехода, запускаемые прокруткой, а не анимацию в традиционном смысле. Однако это никаким образом не умаляет общей привлекательности дизайна сайта. Это просто еще одна версия тренда, которая была переосмыслена.
На сайте анимация влияет на различные элементы интерфейса, начиная с заголовка и заканчивая текстом. Она создает интересный переход между блоками, делая пользовательское взаимодействие крайне положительным.
Culturally Connected — это типичный частично иллюстрированный сайт, наполненный различными эффектами при скролле. Такие решения помогают раскрыть всю красоту, скрытую в самом проекте, ведь иллюстрации и анимация просто созданы для совместной работы. Эти два элемента дизайна составляют довольно мощный и эффектный дуэт.
На сайте почти в каждом блоке есть цветочная композиция с интерактивным компонентом, запускаемым при прокрутке. Движение также создает ощущение живого, дышащего интерфейса. Обратите внимание: несмотря на то, что есть много динамических деталей, они не подавляют друг друга и не загружают общи вид страницы, а идеально работают вместе.
Как мы упоминали ранее, анимацию с запуском прокрутки можно использовать, чтобы направлять пользователей от одной точки фокуса к другой и контролировать поток чтения. Tall, True & Tangled — хороший тому пример.
Команда дизайнеров создала визуальную иерархию последовательно сверху вниз. На сайте вы видите небольшую дорожку в виде простой линии, которая с самого начала привлекает внимание и ведет взгляд пользователя сверху вниз. Эта анимация отлично вписывается в общий дизайн, завершает тему и не раздражает пользователей.
Как и в предыдущем примере, команда дизайнеров Esperanto также использует анимацию при скролле для управления потоком чтения пользователя. На сайте вы видите автомобиль (и самолет в нескольких блоках), который сопровождает читателя на протяжении всего просмотра домашней страницы. Он движется, вращается и даже переворачивается. Он создает путь, который естественно привлекает внимание и устанавливает некоторые привязки к точкам фокуса.
Каждый раздел дополнен динамическими эффектами, которые также запускаются вертикальной прокруткой. В целом интерфейс выглядит свежо, современно и увлекательно.
Команде Wits удалось заполнить домашнюю страницу многочисленными анимациями при скролле и при этом сохранить баланс между развлекательной и информативной частями.
На сайте каждый блок представляет собой экран со своей темой и анимацией. В некоторых случаях она короткая, а в других — более продолжительная. Где-то анимация реализована только в шрифтах и заголовках, а где-то она уже являются частью необычных дизайнерских решений.
Wits — это пример того, как на первый взгляд перенасыщенность анимацией при прокрутке может принести пользу, а не навредить пользовательскому опыту.
Сайт Стэнли Кубрика — пример сайта с интерактивным сторителлингом. Он посвящен 90-летию американского кинорежиссера и продюсера Стэнли Кубрика. Его жизнь и творчество представлены поразительным образом благодаря совокупности анимации при прокрутке и множестве других элементов веб-дизайна.
Параллакс присутствует в блоках с фоном и используется для выявления наиболее важных элементов этого проекта, в первую очередь работ Кубрика, которые представлены в хронологическом порядке.
Чтобы сделать сайт с анимацией при прокрутке увлекательным, необязательно использовать множество визуальных элементов и яркую графику. Иногда можно обойтись тщательно подобранным шрифтом и общей типографикой, что прекрасно демонстрирует этот сайт.
Первое, что мы видим после загрузки сайта-портфолио, — это большая белая буква V на черном фоне. V — это начало имени художника, но букву также можно рассматривать как стрелку, направленную вниз, побуждая нас начать изучение сайта.
Первая прокрутка запускает множество анимированных шрифтов и взаимодействия, в котором буквы и фон меняют свой цвет с черного на белый и наоборот. На сайте реализованы как вертикальные, так и горизонтальные переходы, а также микровзаимодействие между курсором и буквами.
Когда дело доходит до сайтов, которые в значительной степени полагаются на анимацию при скролле, важно убедиться, что все — от контента до мельчайших частей интерфейса — идеально работает вместе, чтобы создать единое целое.
Например, сайт-портфолио Фабиана Фердинанда Фалленда. Он выглядит дерзким, смелым, немного агрессивным. Сразу понятно, что сайт нацелен на определенную аудиторию.
Сочетание жирных шрифтов, асимметричных макетов и анимации при скролле делает пользовательский опыт более увлекательным. Все эти элементы вместе заставляют просматривать сайт и изучать контент по ходу прокрутки, а не использовать меню для быстрого перехода к определенному разделу.
Если говорить в целом о дизайне, то этот сайт довольно прост, но одновременно разнообразен в плане анимации, графических элементов и, конечно же, типографики.
Анимированные элементы ритмичны, они накладываются друг на друга и пересекаются. Изображения на заднем плане постоянно меняются, а шрифты привлекают внимание. Что отличает этот сайт от предыдущего, так это горизонтальная прокрутка, которая дает сайту совершенно новое видение и предоставляет пользователям возможность бесконечной прокрутки.
Несмотря на то, что анимация при прокрутке используется только в определенных разделах сайта, она все равно заметна. Логотипы и шрифты работ Де Марко анимированы, а яркий зеленый цвет удерживает взгляд посетителя прикованным к экрану. Типографика доминирует, и текстовое содержимое появляется на скролле.
Если вы нажмете на любой из представленных проектов и перейдете на отдельную страницу, посвященную только выбранной работе, вы заметите, что по мере изучения содержания фотографии, кажется, все дальше отдаляются от вашей точки зрения.
Cайт-портфолио Юто Такахаши — еще один пример, демонстрирующий, насколько многого можно достичь с помощью анимации при скролле. Первое, что вы видите на сайте, — это вращающийся круг из имени художника, слова "Портфолио" и фразы "Проживает в Токио". Проекты, над которыми художник работал, выглядят убедительно и занимают большую часть экрана.
Шрифты с засечками вокруг фотографий выделяются и асимметрично размещаются вокруг проектов. С каждым новым движением курсора поверх изображений появляется анимация жидкости, нарушающая их форму, в то время как наше внимание сосредоточено на волнистых движениях.
Если мы нажмем на любую из избранных работ, мы увидим, что анимация при скролле также используется на отдельных страницах проекта, в основном для избранных изображений, которые меняют свой размер при прокрутке.
Вывод
Просто взглянув на приведенные примеры, становится понятно, что анимация при прокрутке универсальна и может использоваться на различных сайтах. Анимацию при скролле (прокрутке) можно реализовать как ненавязчивый эффект, или сделать ее основой интерактива сайта.
Такая анимация
- привлекает внимание пользователя,
- придает интерфейсу современный вид,
- делает скучный и монотонный скролл приятным и иногда увлекательным.
Важная вещь, о которой стоит помнить во время реализации такого эффекта, — баланс. Говорят, что чем меньше, тем лучше, и это правда, когда дело касается дизайна в целом. Но когда мы говорим об анимации при скролле это не обязательно так.
Как вы могли убедиться, просматривая примеры, пользовательский опыт может стать особенно захватывающим, когда анимация работает на пределе. Когда мы видим переходы с одной страницы или раздела на другой, мы часто удивляемся увиденному, но чаще всего это увлекает и захватывает внимание.
Также не забывайте о точках фокуса, о которых мы уже говорили. Анимация фокусирует внимание на определенных разделах сайта.
Кроме того, анимация делает сам дизайн сайта чистым и лаконичным. Вместо использования множества кнопок, меню, навигации, различных типов стрелок и прочих элементов вы можете обеспечить пользователям увлекательный, интерактивный и плавный просмотр страниц, просто включив в свой проект анимацию при скролле.
