Термин: Анимация

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

Зачем анимация нужна на сайте

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

Функции анимации на сайте:

• Анимация как способ представить продукт. Хороший пример такого применения — презентация Mac Pro от Apple. Здесь анимация наглядно показывает всю «начинку» устройства.
• Анимация элементов интерфейса — важная часть UX. Простой пример: кнопка меняет свой цвет и размер при наведении курсора. Такая анимация позволяет улучшить опыт взаимодействия пользователя с сайтом, подсказать, какие элементы — кликабельные, а какие — нет.
• Анимация ожидания — позволяет отвлечь пользователя во время загрузки сайта или каких-то элементов функционала. Часто в таком случае отображается шкала прогресса — сколько еще осталось до полной загрузки.
• Анимация как красивое дизайнерское решение (без дополнительных функций).
• Анимация как способ наглядно показать пользователю, какие действия ему нужно совершить (например, как сделать заказ или зайти в раздел настроек сервиса).

Анимированные баннеры

Еще один вид анимации применяется в рекламе. Анимированный баннер — это рекламный блок на сайте с движущейся картинкой. Такие баннеры более привлекательны, нежели статичное изображение.

Основные технологии, используемые для создания анимации, — HTML5, CSS3 и JavaScript.

Уместность анимации

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

Примеры

Вот несколько примеров сайтов с качественной анимацией:

• BrightMedia,
• Canva,
• Tomerlerner.com,
• Fluger Design,
• анимированный сайт о кофе.

См. также

• CMS
• CSS
• Flash
• HTML
• JavaScript
• Верстка
• Спрайт