Анимация на сайте как сделать

Как добавить анимацию на сайт и не облажаться

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

Методы и ограничения

Показать анимацию на экране пользователя можно несколькими методами.

Видео. Много весит и в нём сложно настроить бесшовное воспроизведение. Видео подходит для коротких анимаций, которые не перегружают сайт.
GIF-анимации. Они распространены, но ради уменьшения веса разработчики жертвуют полнотой цветовой палитры. Иначе такие анимации весят слишком много, даже больше видео.
Набор последовательно переключающихся картинок, они же — секвенции. Грубо говоря, это видео без сжатия кадров, которое также много весит и замедляет работу браузера.
Анимированные вручную html-элементы или svg. Требуют сложного процесса разработки.

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

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

Библиотека Lottie

В одном из проектов мы использовали библиотеку Lottie от Airbnb. С ней можно переносить анимации на страницы браузера прямо из After Effects. Библиотека оказалась очень полезной, потому что мы как раз создавали сайт с многослойной анимацией для RBK.money.

С Lottie мы смогли добавлять на сайты сложные анимации и не думать о их размерах.

На главную страницу сайта RBK.money мы добавили зацикленный ролик длиной 15 секунд, который весит всего 65 КБ в сжатом состоянии. У нас получились плавные анимации, которые быстро загружаются и воспроизводятся без стыковок.

Преимущества

Преимущества Lottie — меньший вес и адаптивность. Библиотека работает с векторной отрисовкой. Это означает, что не придётся готовить отдельные изображения для экранов с разным разрешением.

В Lottie можно управлять анимацией — настроить воспроизведение при нажатии на триггер или интерактивную анимацию, которая следует за движением курсора.

Аниматор работает с привычными инструментами и экспортирует результат с помощью плагина в формат json. Разработчику остается только подключить этот json к сайту и настроить его воспроизведение.

Недостатки

Библиотека рендерит анимацию либо в svg, либо в canvas. У формата svg можно настраивать прозрачность, но он сильно загружает процессор из-за постоянной прорисовки html-контента страницы. Поэтому, когда мы добавили многослойные анимации на сайт RBK.money, кулеры наших компьютеров перешли в режим турбины. Пришлось переделать всё в canvas. В нём не настраивается прозрачность, зато нагрузка на процессор ниже.

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

Из-за разных языков программирования некоторые инструменты After Effects не работают с Lottie. Поэтому при создании анимаций на сайте RBK.money мы отказались от «паппетов» — инструментов для плавного движения анимации. Пришлось всё делать вручную и это заняло довольно много времени.

Что получилось

Мы сделали необычный и запоминающийся сайт с плавными анимациями. Анимации, сделанные в Lottie, не увеличили время загрузки страниц.

За дизайн сайта RBK.money мы получили награды:

Tagline Awards 2019Серебро Лучшая B2B-кампания
Рейтинг Рунета 2019Серебро Финансы, инвестиции, банки
CSS Design Awards 2019 Special Kudos / UI Design / UX Design / Innovation
Awwwards 2019 Honorable Mention

Мини-туториал по анимации в CSS и HTML5

Рассказываем, как сделать анимацию без использования JavaScript. Пишем страницу авторизации пользователя на CSS и HTML5.

За годы работы с Front End технологиями мне приходилось работать с разными способами анимации. В этой статье я хочу подробнее разобрать, как работает анимация в CSS без использования JavaScript.

В CSS есть свойство animation, которое позволяет анимировать практически любое свойство HTML элемента. Правило анимации указывается в блоке keyframes.

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

Давайте рассмотрим пример, где мы меняем цвет фона у элемента.

Создадим в HTML элемент с классом «element»:

В CSS создаем правило для анимации в блоке keyframes. Назовем анимацию changeColor. Анимация будет менять цвет фона объекта с красного на синий.

@keyframes changeColor < 0% < background-color: red; >100% < background-color: blue; >>

Здесь 0% — это начало анимации, 100% — это конец анимации. Все что между движок CSS автоматически анимирует в плавное изменениe свойста, которое вы выбрали. В данном случае будет плавное изменение цвета.

Теперь добавим эту анимацию как свойство animation в CSS стилях для элемента. Наш CSS будет выглядеть таким образом:

.element

Результат данной анимации будет выглядеть так:

Мы можем контролировать анимацию при помощи дополнительных свойств.

В данном примере после имени анимации мы указали скорость анимации (2s) и количество повторений (в данном случае бесконечное количество повторений infinite).

Существует несколько свойств анимации. Рассмотрим каждый из них:

animation-name: имя анимации определенным правилом keyframes
animation-duration: сколько времени займет один цикл анимации от 0% до 100%
animation-timing-function: определяет кривые ускорения, такие как ease и linear
animation-delay: время задержки между моментом загрузки элемента в браузере и началом анимации.
animation-direction: указывает направление анимации. По умолчанию анимация идет от 0% до 100%. С помощью данного свойства можно сделать так, чтобы анимация шла в обратную сторону от 100% до 0% или каждый раз меняла направление.
animation-iteration-count: количество повторений цикла анимации. Можно установить число или указать infinite для бесконечного повторения анимации.
animation-fill-mode: устанавливает значение, которое устанавливается до начала или после окончания анимации. Например, можно указать, что после завершения всех циклов анимации фон элемента будет зеленый.
animation-play-state: проигрывает/ставит на паузу анимацию

Свойства анимации указываются таким образом:

.element

Все эти свойства можно записать и одной строкой:

.element

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

Правило keyframes может иметь неограниченное количество шагов. Не обязательно только начало и конец. Можно указать значения и для середины цикла анимации:

@keyframes changeColor < 0% < background-color: red; >50% < background-color: yellow; >100% < background-color: blue; >>

HTML элементу можно одновременно присвоить несколько анимаций. Давайте добавим нашему элементу анимацию move, которая будет двигать элемент влево и вправо.

Добавим новый блок keyframes

@keyframes move < 0% < margin-left: 0px; >100% < margin-left: 200px; >>

Перечислим анимации через запятую

animation: changeColor 3s infinite, move 4s infinite alternate;

Как видите, мы присвоили одному элементу одновременно 2 анимации: движение и смену цветов.

Практические примеры

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

Анимация спиннера загрузки

Очень часто можно увидеть во время загрузки контента вращающийся спиннер. Давайте создадим такой спиннер при помощи CSS анимации.

В этом примере мы использовали анимацию rotate, где зациклили вращение спиннера на 360 градусов.

@keyframes rotate < from to >

Далее мы использовали эту анимацию в списке стилей для элемента:

animation: rotate 1.5s infinite linear

Анимированная форма авторизации

Давайте создадим что-то посложнее. Например анимированную форму авторизации.

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

 Login Username
 Password
 Submit

Обратите внимание на несколько span в кнопке Submit. Именно их мы потом и будем анимировать.

Добавим статические стили в CSS, чтобы наша форма выглядела красиво:

html < height: 100%; >body < margin:0; padding:0; font-family: sans-serif; background: linear-gradient(#141e30, #243b55); >.login-box < position: absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate(-50%, -50%); background: rgba(0,0,0,.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.6); border-radius: 10px; >.login-box h2 < margin: 0 0 30px; padding: 0; color: #fff; text-align: center; >.login-box .user-box < position: relative; >.login-box .user-box input < width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; >.login-box .user-box label < position: absolute; top:0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; >.login-box .user-box input:focus ~ label, .login-box .user-box input:valid ~ label < top: -20px; left: 0; color: #03e9f4; font-size: 12px; >.login-box form a < position: relative; display: inline-block; padding: 10px 20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform: uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing: 4px >.login-box a:hover

Теперь добавим анимации. Анимировать мы будем элементы в кнопке Submit.

Добавим 4 блока keyframes с правилами анимации:

@keyframes btn-anim1 < 0% < left: -100%; >50%,100% < left: 100%; >> @keyframes btn-anim2 < 0% < top: -100%; >50%,100% < top: 100%; >> @keyframes btn-anim3 < 0% < right: -100%; >50%,100% < right: 100%; >> @keyframes btn-anim4 < 0% < bottom: -100%; >50%,100% < bottom: 100%; >>

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

Добавим теперь эту анимацию каждому элементу:

.login-box a span:nth-child(1) < animation: btn-anim1 1s linear infinite; >.login-box a span:nth-child(2) < animation: btn-anim2 1s linear infinite; animation-delay: .25s >.login-box a span:nth-child(3) < animation: btn-anim3 1s linear infinite; animation-delay: .5s >.login-box a span:nth-child(4)

Как видите, мы добились стильной анимации, используя только HTML и CSS.

Заключение

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

Всё о веб-анимациях в 2022

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

Даже совершенно обычный сайт можно оживить анимацией:

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

Автор — Аарон Икер, источник: dribbble.com

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

Способы создания анимаций

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

CSS-анимации,
SVG-анимации,
JavaScript-анимации.

CSS-анимации

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

CSS-анимации создают с помощью группы свойств animation . Они задают длительность анимации, количество повторений, зацикленность, стороны движения и другие характеристики:

animation-name — имя анимации, можно задавать несколько имён через запятую;
animation-direction — направление анимации;
animation-fill-mode — состояние элемента до и после анимации;
animation-play-state — управление состоянием: запуск или приостановка анимации;
animation-timing-function — определяет, как происходит анимация в течение длительности каждого цикла;
animation-delay — задержка начала выполнения анимации;
animation-iteration-count — количество повторов анимации;
animation-duration — длительность.

С помощью CSS можно создавать покадровые анимации — когда картинка, на которой нарисован объект в разных состояниях, превращается в движение. Для таких анимаций нужно иметь уже готовую раскадровку или склеить её самостоятельно из нескольких изображений.

Автор — Дилан Бауманн, посмотреть на CodePen.

CSS-анимация может быть объёмной. Для создания 3D-изображения используют свойство transform-style со значением preserve-3d . С его помощью можно вращать объект и изменять его в трёх плоскостях:

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

Посмотреть на CodePen. Луна тоже нарисована на чистом CSS.

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

Автор — Бенджамин Симье, посмотреть на CodePen.

С помощью CSS можно анимировать векторную графику — SVG. Например, заставить контур постепенно появляться или добавить индикатор загрузки:

Индикатор загрузки, автор — Стивен Робертс. Посмотреть на CodePen.

SVG-анимации

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

SMIL применяют, когда CSS-анимации не справляются и не могут анимировать содержимое SVG. Например, его используют, когда нужно трансформировать форму фигуры, изменив координаты для линии или саму форму:

Автор: Никки Пантони, посмотреть на CodePen.

Или когда нужно заставить элемент двигаться по заданному пути:

Автор: Фабио, посмотреть на CodePen.

А такая анимация похожа на покадровую в CSS, но это всё ещё SMIL:

Автор: CRL, посмотреть на CodePen.

JavaScript-анимации

Третий способ создания анимаций — с помощью JavaScript. Его используют, когда другие способы не подходят. Например, с помощью JS можно создать популярный параллакс-эффект — когда при прокрутке окна браузера элементы фона на переднем и заднем плане двигаются с разной скоростью. Это даёт ощущение трёхмерного пространства.

Автор — Джереми Кэрис, посмотреть на CodePen.

Самые сложные анимации создают с помощью JavaScript, WebGL и специальных библиотек, которые упрощают написание кода к анимациям: Three.js, TweenMax или GSAP.

Читать:

Как зайти на java сервер с bedrock

Сайты с JavaScript-анимацией загружаются долго, могут работать медленно, но вызывают «вау-эффект».

Как оптимизировать анимации на сайте?

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

Свойство transform универсально для большинства ситуаций, и когда мы его используем, браузеру легче заново отрисовать изменения на странице. К примеру, если нужно переместить объект, то стоит использовать transform: translate , а не абсолютное позиционирование и координаты left и right .

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

Как создать простую анимацию?

Самый простой способ познакомиться с анимациями — изучить свойства animation . В этом поможет спецификация, переведённая на русский язык.

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

Сначала создадим HTML-разметку. Добавим два элемента. Первый — ball , сам мяч. Второй — ball-bg , элемент для фона, создаём его внутри ball. Делаем два разных элемента, потому что мячик будет скакать, а внутри него станет вращаться фон.

Добавляем базовую CSS-стилизацию для элементов: размеры, скругление углов, фон футбольного мяча.

.ball < font-size: .9px; width: 60em; height: 60em; border-radius: 50%; position: relative; >.ball-bg < width: 100%; height: 100%; background: url(http://guthriesports.files.wordpress.com/2010/03/soccer_ball_6.jpg) no-repeat center; >

Создаём первую анимацию с помощью директивы @keyframes @keyframes (rotating-ball) @keyframes . Называем её rotating-ball , так как она отвечает за вращение мяча. Внутри анимации добавляем две точки: от какого (0%) и до какого (100%) состояния должен вращаться мяч. Это будет 0 и 180 градусов соответственно. Градусы в CSS прописываем с помощью deg — 180deg .

Чтобы применить анимацию к элементу, задаём свойство animate элементу ball-bg . Чтобы проще было с ним разбираться, будем пользоваться отдельными свойствами внутри animate.

имя анимации, которое указали в @keyframes @keyframes (rotating-ball) ;
длительность анимации — animation-duration — за сколько она проходит от точки 0% до 100%.
количество повторений — animation-iteration-count, сделаем анимацию бесконечной — infinite;
как будет развиваться анимация между ключевыми кадрами — animation-timing-function , сделаем равным linear .

@keyframes rotating-ball < 0% 100% > .ball

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

translate — для перемещения горизонтально и вертикально;
scale — чтобы имитировать эффект сжатия и растягивания мяча, когда он ударяется об пол;
rotate — придать дополнительное вращение при ударах.

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

@keyframes bouncing-ball < 0% 12% 15% 18% 21% 45% 48% 51% 69% 72% 75% 90% 100% >

Теперь применим анимацию к элементу ball . Длительность анимации делаем больше секунды.

.ball

Добавим промежуточные пункты, чтобы анимация смотрелась более правдоподобно. Получаем результат:

Итоги

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

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

Автор: Елизавета Пак, старший HTML-верстальщик в Brain Rocket

Анимация страниц сайта, которая нравится всем

Продуманная и уместная анимация страниц сайта не только радует глаз, но и серьёзно помогает в работе. На сегодняшний день её можно без преувеличения назвать одной из основ web-дизайна – и действительно, ни один современный ресурс невозможен без неё, ведь на ней нередко основано взаимодействие с пользователем. Последнее стало возможным благодаря тому, что анимация информирует о тех или иных состояниях страницы или же направляет внимание в нужное русло. Из-за её популярности весьма распространены ситуации, когда её используют неправильно… И результаты получаются прямо противоположными ожидаемым: она вызывает раздражение, непонимание или же откровенную скуку у пользователей. Не удивительно, что многие разработчики задаются вопросом о том, как сделать анимацию на сайте, которая будет к месту и нравиться пользователям.

Виды анимации, которые используют на веб-сайтах

Удивительно, но факт: обозначение «анимация» произошло от латинского слова “anima”, которое переводится как «душа» или «жизнь». И действительно, движение на картинках оживляет и, даже возможно, в какой-то степени одухотворяет в восприятии смотрящего. Можно посмотреть на это явление и под другим углом: благодаря анимации вы можете вдохнуть жизнь в страницы Вашего сайта. Само собой, данное направление постоянно развивается, и если ранее для того, чтобы впечатлить пользователя, было достаточно самых простых GIF-изображений, то сегодня всё стало более серьёзным.

Объекты

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

Текст

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

Изображения

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

Разрабатываем дизайн
Создаём удобные и простые интерфейсы, которые помогают компаниям развиваться в цифровой среде

Видеоролики

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

Секвенции

Данное обозначение произошло от английского слова “sequence”, которое переводится как «последовательность»… И действительно, особенность данного решения заключается в демонстрации комплекта отдельных изображений за определённый временной промежуток. Таким образом создаётся иллюзия движения. При этом, в отличие от видеороликов, возможность заменять отдельные кадры или удалять те из них, которые более не нужны, здесь есть. Помимо этого, дизайнер может выбирать количество кадров и их качество.

Функции, которые выполняет анимация

Давайте разберёмся с тем, для чего именно на сайте нужна анимация. Перед тем, как создавать её, нужно чётко определить для себя её назначение.

Прелоудеры, или режим ожидания

Английское обозначение “preloader” переводится как «предзагрузчик». Последний представляет собой индикатор, который информирует пользователя о том, что на данный момент страница загружается. Интересный прелоудер, оформленный в тематике сайта, не только привлекает внимание пользователя, пока тот ждёт загрузки, но и скрывает изображение страницы, пока та загружается.

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

Storytelling и создание настроения

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

Декоративная анимация

Что такое декоративная анимация страниц сайта? Это – самые разные решения, начиная с сообщений об ошибках и заканчивая видеовставками или оригинальными скроллами страницы.

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

Итог

Итак, какие именно выводы можно сделать из вышеизложенного? Они заключаются в том, что анимация способна:

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

Способы сделать анимацию эффективной и интересной для пользователя

Многие специалисты в данной сфере советуют в первую очередь внимательно изучить принципы анимации, изложенные в книге «Иллюзия жизни: анимация Диснея», написанной американскими мультипликаторами “WaltDisneyAnimationStudios”. Они основаны на почти столетнем опыте работы аниматоров студии. Что касается других основ, то они – следующие:

Реалистичность с правильным отображением перспектив и теней, а также плавностью движений;
Не перегружайте страницу анимированными объектами, чтобы не отвлекать внимание пользователей от основной информации и не вызвать у них раздражения;
В последнем случае лучше всего индивидуально подбирать скорость для тех или иных движений, используемых в анимации;
Избегайте одновременной анимации сразу нескольких элементов, используйте вместо неё последовательную;
Учитывайте продолжительность анимации: она не должна быть слишком длинной, особенно – если это не оправдано ожиданием завершения того или иного процесса;
Создавая секвенцию, правильно настройте скорость показа кадров для того, чтобы их было комфортно просматривать;
Если нужно создать несколько элементов одного назначения, лучше всего использовать один и тот же стиль, одни и те же эффекты и одну и ту же скорость;
Задействуйте анимацию на тех элементах, с которыми пользователь взаимодействует чаще всего, но при этом сделайте её ненавязчивой и не отвлекающей, скажем, от заполнения форм;
Обязательно протестируйте своё творение на устройствах малой мощности, через разные браузеры, а также при недостаточно хорошем интернет-соединении.

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

Приёмы повышения производительности

Ситуации, когда сайт медленно грузится из-за анимаций на нём, – не редкость. О негативном влиянии этого явления наслышаны практически все: потеря пользователей, их переход к конкурентам… Впрочем, есть и ряд простых решений, которые позволят его избежать. Вот они:

Не одновременный, а последовательный запуск анимаций, если их на сайте больше трёх;
Сведение к минимуму элементов на web-странице, упрощение её разметки;
Принудительная остановка повторного воспроизведения видеоролика, возможность самостоятельной остановки пользователем;
Подбор оптимальных битрейтов и их числа при воспроизведении видеоролика или секвенций (не стоит их делать слишком высокими или низкими);
Не рекомендуется использовать так называемые «слоёные» анимации, но если очень нужно, то лучше заменить их полупрозрачными изображениями;
Создавая анимации по технологии CSS, не изменяйте никаких параметров кроме трансформации и прозрачности;
Выведение анимаций в отдельный слой для того, чтобы при их изменении не были затронуты другие элементы;
Отказ от функций однократного и регулярного планирования вызова для сохранения синхронизации с устройством пользователя;
Сведение к минимуму или отказ от обращения к элементам посредством JS для исключения дополнительной нагрузки.

Другие «хитрости» от “SerpTop”, которые помогут вам справиться с созданием анимаций для сайта на «отлично»:

Задавание времени анимаций с помощью переменных в будущем позволит ускорить или замедлить их при необходимости;

Не забывайте использовать свойство “pointer-events” в CSS для того, чтобы контролировать события, при которых анимация может оборваться, то есть стать объектом события мыши;
Проверяйте готовую анимацию на низкой скорости для того, чтобы найти все имеющиеся в ней ошибки;
Учитывайте и используйте новые свойства браузеров при разработке анимаций (к примеру, свойство “@supports” продемонстрирует анимацию в том виде, в котором её увидит пользователь, и поможет устранить её недочёты.

Создание профессиональной анимации для вашего сайта – одно из направлений деятельности “SerpTop”. Обращайтесь к нам – и мы ответим на любые ваши вопросы, дадим рекомендации и поможем решить задачи любой сложности, связанные с его созданием или поддержкой.