Как сделать лендинг с анимацией

21.03.202319.04.2023 admin 0 Комментариев

Примеры лендингов с анимацией

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

Fubiz

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

Lempens Design

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

Северная Башня

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

Cameo

Лендинг видеохостинга с возможностью редактирования видео. Здесь мы просто порекомендуем перейти по ссылке и прокрутить колесико. Внезапность происходящих действий вас наверняка порадует.

My pizza oven

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

Blacknegative

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

Источник

Практические советы по улучшению юзабилити лендингов при помощи анимации

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

Содержание статьи

1. Организует повествование

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

Анимации могут вдохнуть в контент жизнь. Хороший пример такой анимации можно найти на Ikonet. Анимации не дают пользователям заскучать в процессе знакомства с посадочной страницей и самой компанией:

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

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

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

2. Обеспечивает обратную связь

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

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

В ваших интересах снабжать объекты такого рода анимациями, которые активизируются в момент взаимодействия пользователя с объектом или простого наведения на него курсора мыши. С помощью таких анимаций вы как бы побуждаете людей к взаимодействию с лендингом. Обратите внимание на Berry Visual. Когда вы наводите курсор на «Send Message» (Отправить сообщение) или на гамбургер-меню, расположенное в верхнем правом углу экрана, возникает приятный анимированный эффект. Появляется ощущение, что эти элементы интерактивны:

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

3. Укрепляет связи

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

Рассмотрим пример резкого изменения:

Это изменение не кажется естественным и приводит к ненужной когнитивной нагрузке (мозг должен отсканировать весь лендинг, чтобы понять, что только что произошло)

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

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

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

При помощи анимации вы можете обозначить связь новых объектов с имеющимся контекстом, их положение в иерархии

4. Делает скучные задачи интересными

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

Заглянув на Tympanus’ 3D Room Exhibition, вы можете сказать, что он выглядит так же, как и любой другой сайт-галерея, на котором вы бывали раньше. Но как только вы начнете взаимодействовать со страницей, ваше мнение о лендинге изменится кардинально. Достаточно всего лишь переместить курсор, как страница придет в движение, и вы ощутите эффект 3D-пространства. Это чувство усиливается, когда вы будете переходить с одной страницы на другую; вам начнет казаться, что вы перемещаетесь между комнатами в трехмерном пространстве.

Теперь поговорим о чем-то гораздо более знакомом, чем 3D-эффекты: веб-формах. Скажите, вы знаете кого-нибудь, кому нравится их заполнять? Вряд ли. Между тем заполнение форм — одно из самых распространенных действий, которое предлагается выполнить посетителям лендингов. Как же изменить их отношение к этому?

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

Процесс скроллинга можно сделать не только визуально интересным, но и полезным.

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

6 лучших примеров анимации для лендингов

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

1. Не анимируйте несколько элементов за раз

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

Крайне важно понять концепцию переходной хореографии,которая заключается в том, что согласованная последовательность движений удерживает фокус внимания посетителя при изменении интерфейса. Минимизируйте количество элементов, которые движутся независимо друг от друга; в одно и то же время должно происходить незначительное число событий (не более 2-3). Поэтому, если вы хотите анимировать более 3 объектов, группируйте их и анимируйте как единое целое, а не по отдельности.

Не анимируйте все сразу одновременно. Объекты начнут конкурировать друг с другом за внимание пользователя

2. Анимация не должна конфликтовать с индивидуальными особенностями лендинга

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

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

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

Если вы хотите анимировать форму, чтобы привлечь к ней внимание посетителя лендинга, то в конструкторе LPgenerator доступны 2 события, при которых будет срабатывать анимация — при появлении элемента на экране при прокрутке лендинга, а также при наведении указателя мыши:

Чтобы настроить анимацию формы, кликните по полям формы и выберите пункт настроек «Анимация» в правой панели редактора

3. Следите за временем

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

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

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

4. Не забывайте о доступности

Анимация — это палка о двух концах. Она может улучшить юзабилити для одной группы пользователей, но одновременно создать проблемы для другой. Релиз новой редакции операционной системы Apple iOS 7 является примером последнего: iOS 7 была полна анимированных эффектов, и вскоре после ее выпуска пользователи iPhone сообщили, что анимированные переходы вызывают у них чувство тошноты.

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

Специальная функция CSS «prefers-reduced-motion» (предпочитает минимум движений) помогает отслеживать те ситуации, когда сам пользователь обращается с запросом минимизировать количество анимаций. Если такой запрос поступил, лучше отреагировать на него и уменьшить объем анимаций.

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

5. Проводите тест ваших дизайнерских решений

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

Ниже несколько советов, к которым следует прислушаться, если вы задумали провести тест своих работ:

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

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

Трудно заметить несовершенство анимации (особенно сложной), когда она проигрывается на полной скорости. Когда вы замедляете анимацию (скажем, до одной десятой от нормальной скорости), все недоработки становятся более очевидными. Можете заснять свою анимацию в режиме замедленной съемки и показать ее другим людям, чтобы узнать их мнение.

6. Разработку анимаций следует начинать на ранних этапах работы над дизайном

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

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

Заключение

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

Источник

75 инструментов веб-анимации, которые вам стоит попробовать на лендинге

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

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

Содержание

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

Некоторые виды анимаций на лендинге позволяют завладеть вниманием посетителя, заинтересовать его, убедить остаться на странице и как результат — совершить конверсионное действие. Грамотно размещенные а нимационные элементы мягко «продвигают» пользователя по всему лендингу, не давая ему скучать.

В наших проектах мы успешно используем анимацию в нескольких направлениях:

1. Анимация плавно появляющихся элементов при загрузке страницы

Возьмем в пример один из лендингов, посвященных продаже популярных моноколес:

Полную версию лендинга можно посмотреть здесь

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

2. Анимация группы элементов

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

В примере ниже — лендинг по продаже квартир (блок «Почему другие риэлторы не продают настолько эффективно»):

Полную версию лендинга можно посмотреть здесь

3. Анимация лид-формы

Если вы хотите анимировать лид-форму, чтобы привлечь к ней внимание посетителя лендинга, то в конструкторе LPgenerator доступны 2 события, при которых будет срабатывать анимация — при появлении элемента на экране при прокрутке лендинга, а также при наведении указателя мыши:

Чтобы настроить анимацию формы, кликните по полям формы и выберите пункт настроек «Анимация» в правой панели редактора

4. Сложная анимация и параллакс

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

Данный лендинг сочетает в себе эффект анимации и параллакс-скроллинга

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

1. Animate.css

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

2. Magic Animations

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

3. Bounce.js

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

4. AnijS

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

5. Snabbt.js

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

6. Kute.js

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

7. Velocity.js

Velocity.js — непрезентабельный на первый взгляд движок. Однако в его арсенал входят все обычные типы анимации, он быстр и независим от jQuery.

8. Lazy Line Painter

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

9. SVG.js

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

10. Motion UI

В отличие от предыдущих примеров, при создании интересных CSS-анимаций Motion UI опирается на Sass. Инструмент содержит массу заранее заданных настроек и эффектов, которые можно применить к любому компоненту HTML. Все работает во всех популярных браузерах, кроме IE9.

11. Wait! Animate

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

12. Dynamics.js

Dynamics.js — это библиотека, работающая на JavaScript и предлагающая 9 стандартных эффектов. Вы можете задать продолжительность, частоту, трение, предполагаемый размер и силу, чтобы создать реалистичные анимации, основанные на законах физики.

13. Choreographer.js

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

14. Anime.js

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

15. Mo.js

16. Sequence.js

Sequence.js — это фрейм, работающий на CSS, для создания респонсивных пошаговых анимаций, которыми можно управлять с помощью прикосновений. Инструмент идеален для слайдеров, презентаций, баннеров и других динамических компонентов. Среди премиум-планов вы найдете бесплатный, обеспечивающий вас личной open-source лицензией.

17. Shifty

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

18. It’s Tuesday

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

19. CSS Animate

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

20. Vivus.js

Vivus.js поддерживает три типа анимации: задержка, синхронизация и открытие одного изображения за другим, — и позволяет создавать плавные и естественные векторные анимации, так что загрузка контента станет приятным опытом.

21. Bonsai.js

Bonsai.js — это библиотека JavaScript для серьезной работы с графикой, с простым API и визуализацией SVG. Используйте онлайн-редактор, чтобы протестировать инструмент, познакомиться с его структурой и даже загрузить некоторые примеры, с которых можно начать работу.

22. GSAP by GreenSock

GSAP — это платформа для профессиональных аниматоров. На ней представлено множество плагинов и утилит, отвечающих за разные типы анимации: BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite и другие.

23. Popmotion

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

24. Tween.js

С помощью Tween.js сделано немало хороших анимаций. Это передовой движок для построения промежуточных изображений со множеством настроек и отличное решение для улучшения проектов, работающих на Three.js.

25. Hover.css

Библиотеку Hover.css можно разделить на несколько главных категорий: 2D-трансформации, фоновые трансформации, анимация иконок, трансформации границ, теней и света, пузыри с текстом и завитки. Применяйте эти эффекты к любым элементам своего дизайна без ограничений.

26. Transit

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

27. Rocket

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

28. Animo.js

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

29. Shift.css

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

30. CSShake

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

31. Saffron

Если вы предпочитаете миксины для легкого и быстрого управления анимациями и переходами, Saffron вам определенно подойдет. Это собрание методов многократного использования, написанное на Sass, с возможностью задавать параметры и переменные.

32. CSSynth

CSSynth — это маленький редактор, в котором вы насладитесь красотой синхронизации. Анимация основана на серии квадратов, количество которых вы можете задать на панели слева. Выберите эффект, задайте задержку и скачайте результат в формате CSS или SCSS.

33. Ceaser

Ceaser — старый, проверенный временем инструмент для проведения экспериментов с классической анимацией затухания, содержащий множество вариантов. Два дополнительных параметра (продолжительность и эффект) помогут довести результат до совершенства.

34. Morf.js

Если вам нужно немного больше, чем дает Ceaser, вам стоит попробовать Morf.js. Он предлагает переходы, основанные на полностью настраиваемых функциях затухания, и содержит почти 40 готовых вариантов, которые легко адаптировать под свои нужды.

35. Voxel.css

Voxel.css создан специально для 3D-рендеринга, и простота его установки и использования позволит освоить 3D CSS даже новичкам. Библиотека содержит 4 важных категории: сцена, мир, редактор и воксел, — которые помогут создавать игры и наслаждаться работой.

36. Repaintless.css

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

37. MixItUp

MixItUp — это библиотека красивых фильтров, сортировок, пересечений и действий, необходимых большинству интерфейсов вроде галерей, портфолио и т.д. Она автономна и обещает высокую скорость работы сайта.

38. Wallop

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

39. Ramjet

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

40. jQuery DrawSVG

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

41. Animatic.js

Это отличное кросс-браузерное решение, оживляющее все с помощью CSS-трансформаций, 3D-трансформаций и JavaScript. Его главная задача — облегчить вам усилия при анимировании нескольких объектов сразу. Вы можете создавать параллельные и последовательные анимации и точно настраивать продолжительность, задержку и затухание.

42. Move.js

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

43. Eg.js

Eg.js — это тщательно подобранная коллекция различных эффектов и динамических элементов, призванных улучшить взаимодействие с интерфейсом. В ее состав входит 8 мощных компонентов для основных задач и 6 главных методов для других случаев.

44. GFX

GFX — это интересная библиотека 3D-анимации для создания программируемых анимаций на CSS3. Она работает с jQuery, так что добиться желаемых результатов довольно просто. Вы можете «поиграть» с масштабированием, вращением, переходами и прочими эффектами.

45. Stylie

Хотя Stylie и считается развлекательным инструментом, он определенно способен впечатлить вас своими возможностями. Центр управления содержит 4 вкладки, позволяющие настраивать ключевые кадры и затухание, экспортировать варианты и HTML, то есть легко создавать сложные анимации.

46. Iconate.js

Iconate.js «вдыхает жизнь» в трансформацию иконок, добавляя симпатичные эффекты и улучшая переходы между двумя объектами. Этот инструмент отлично работает не только со шрифтом Font Awesome, но и с Glyphicons, а также позволяет самостоятельно задать набор пиктограмм.

47. AnimateMate

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

48. CAAT

CAAT — это надежный фрейм, работающий в тандеме с JavaScript. В набор инструментов входят сцены, технологии мульти-рендера, маски, стандартный набор эффектов и другое.

49. Granim.js

Granim.js — это небольшая JavaScript-библиотека, помогающая украсить интерфейс интерактивными орнаментами, основанными на градиентах. Это может быть стандартный круговой градиент, или динамический градиент, применяемый к фону картинки, или движущиеся градиенты в сочетании с масками.

50. Animista

Animista — это площадка для проведения экспериментов с кучей готовых стандартных и нестандартных анимаций для CSS. Задайте продолжительность, время, задержку, количество взаимодействий и некоторые другие параметры и посмотрите на результат.

51. Obnoxious.css

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

52. Animatelo

Animatelo включает в себя кучу привлекающих внимание динамических эффектов, взятых из знаменитого Animate.css, так что их легче применить. Поддерживается всеми современными браузерами.

53. Foxholder

Foxholder — это пакет с 15 маленькими интересными эффектами, созданными специально для улучшения взаимодействий пользователя с формой. Каждый из них выделяет поле для ввода данных: можно сделать его границы ярче, добавить визуальные подсказки, заставить текст двигаться и т.д.

54. Rhythm.js

Rhythm.js — это библиотека JavaScript с маленькими симпатичными анимациями, вдохновленными стилем диско: эффекты имитируют различные танцевальные движения. Она содержит почти 20 вариантов, которые привнесут на ваш сайт немного буги-вуги.

55. Colorido.js

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

56. Barba.js

Barba.js использует PJAX (технику, основанную на подходе ajax), чтобы избежать резкого переключения страниц. Этот инструмент мягко скрывает старый контейнер и заменяет его новым так, что это приятно глазу.

57. ScrollReveal.js

ScrollReveal.js — это популярный инструмент для создания анимации с прокруткой. Благодаря ему вы можете управлять несколькими анимациями и всеми их стандартными параметрами. Этот инструмент отлично работает и с десктопными, и с мобильными браузерами.

58. Scrollanim

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

59. ScrollTrigger

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

60. Force.js

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

61. AOS

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

62. Rellax

Rellax позволяет поработать с параллакс-эффектом. Это легкая универсальная JavaScript-библиотека для придания интерфейсу объема.

63. Tilt.js

Tilt.js создает интригующий эффект наклона, основанный на параллаксе. Этот инструмент позволяет наклонить объект, имитируя 3D в стандартной 2D-плоскости. Вы можете отрегулировать ось, а также сделать объект блестящим или парящим.

64. Transform-when

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

65. CSS3 Animation

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

66. Curve.js

Curve.js вдыхает жизнь в линии, заставляет их танцевать, кружиться и переливаться. Используйте этот инструмент для создания элегантных геометрических орнаментов.

67. Animator.js

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

68. Cel-animation

Cel-animation — это миксин для Sass, позволяющий управлять ключевыми кадрами. Вы можете сделать подвижным любой элемент HTML или векторную графику.

69. Scrollissimo

Scrollissimo был создан, чтобы вместе с Greensock анимировать объекты при скроллинге. При помощи дополнительного JavaScript-плагина для устройств с сенсорным экраном этот инструмент работает на большинстве девайсов.

70. jqClouds

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

71. Color animation

Color animation — это инструмент для анимирования тона и прозрачности фона, границ и текста. Работает с цветом любого объекта.

72. Flubber

Чтобы предотвратить внезапные скачки и резкие метаморфозы, случающиеся, когда один объект превращается в другой, вы можете использовать Flubber. Единственный минус инструмента в том, что он работает только с 2D-графикой.

73. Particles.js

Если вам нравится популярная сегодня анимация частиц, вам стоит воспользоваться Particles.js. Этот генератор основан на библиотеке JavaScript, которая берет всю работу на себя. Задайте интересующие вас параметры: цвет, количество, форма, размер, прозрачность и прочее, — и просто экспортируйте результат.

74. 3D Lines Animation with Three.js

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

75. Three.js

6 правил анимации на лендингах

Определить области на странице и ситуации, где анимации могут привлечь внимание пользователей, — лишь половина дела. Не менее важно оценить уместность и качество исполнения самой анимации. Чтобы не вызвать отторжения у посетителей вашего лендинга, старайтесь следовать этим 6 правилам:

1. Не анимируйте несколько элементов за раз

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

Крайне важно понять концепцию перехода, которая заключается в том, что только согласованная последовательность движений удерживает внимание посетителя. Минимизируйте количество элементов, которые движутся независимо друг от друга; в одно и то же время должно происходить незначительное число событий (не более 2-3). Поэтому, если вы хотите анимировать более 3 объектов, группируйте их и анимируйте как единое целое, а не по отдельности.

2. Анимация не должна конфликтовать с индивидуальными особенностями лендинга

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

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

3. Следите за временем

4. Не забывайте о доступности

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

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

5. Проводите тест ваших дизайнерских решений

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

Ниже несколько советов, к которым следует прислушаться, если вы задумали провести тест своих работ:

6. Разработку анимаций следует начинать на ранних этапах работы над дизайном

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

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

Заключение

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

Источник