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

Движущаяся карусель привлекает наше внимание, отвлекая нас от неподвижной карусели. Ритм карусели более динамичный, чем листание обычной ленты товаров и услуг.

Вертикальные карусели более удобны пользователям смартфонов, в них можна добавлять десятки и сотни товаров.

Простая карусель с выбором объекта щелчком и с кнопкой перехода на покупку. Может работать в качестве меню сайта.

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

Статистика поисковых систем утверждает, что средняя цена устройств всех пользователей интернета - меньше 200 долларов США. Также средняя продолжительность загрузки видимой части страницы в сетях 3G составляет около 5 секунд.

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

АНИМАЦИЯ заМЕНЫ ИЗОБРАЖЕНИЙ

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

Вот пример простого, но функционального осмотра товаров кнопками. 

АНИМАЦИЯ КИНОЭФФЕКТ TRANSITION MASK

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

Вечер и утро от нейросети.

Интерьер от дизайнера: в нейтральном, апельсиновом, ультрамарине и кровавом😊. Двигайте слайдер от края к краю.

Также анимация (в данном случае AVIF).

АНИМАЦИЯ СПРАЙТ

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

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

Кадры для спрайтов оптимизируются (пережимаются в специальных редакторах) для их более быстрой загрузки на сайт. В спрайтах можно использовать новый суперсжатый формат AVIF,  который к тому же умеет анимировать, как GIF, или легкий формат WebP. 

Ниже представлен простой кнопочный спрайт из 88 кадров формата AVIF с функциями запуска и паузы. Для смартфонов доступна функция тапа по изображению. 

GIF АНИМАЦИЯ

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

Неоптимизированная кнопочная GIF анимация из 210 кадров, объёмом 83 мегабайта. 

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

WebP АНИМАЦИЯ

А вот неплохая альтернатива GIF и AVIF - формат WebP, который тоже умеет анимировать. Файл пережат из большого GIF для возможности точного сравнения. Он имеет объём 37 мегабайт, но его качество выше оптимизированного GIF ролика.

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

АНИМАЦИЯ ВИДЕО МР4

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

Видео в популярном формате mp4, сжатое кодеком H.264, объёмом 7,0 мегабайт.

АНИМАЦИЯ ВИДЕО WebM

Видео в формате WebM (стандарта HTML5), пережатое кодеком AV1, пришедшим к нам вместе с форматом AVIF (для картинок и спрайтов), объёмом 1,36 мегабайт. Приносим извинения пользователям iOS, у которых вместо WebM здесь отображалось бы то же видео mp4, что и сверху (iOS не поддерживает WebM и переключается на альтернативный формат).

LOTTIE анимация

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

Приблизительно так выглядит простая векторная Lottie анимация.

ИГРОВАЯ АНИМАЦИЯ (HTML, CSS, JS, PNG)

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

На страницах нашего сайта Вы можете поиграть и в другие простые рандомные игры.

Видеоанимации в 3D инсталляциях довольно прожорливы к памяти cache браузера, а потому их следует максимально оптимизировать. Если вместо изображений добавить в меню легкие 3D объекты, например, иконки соцсетей, сцена будет работать так же быстро.

Более сложное в реализации и тяжелое для браузера 3D меню для первой страницы сайта. Как и вся другая анимация, эта работает на полную страницу. Также может быть галереей товаров. У каждой анимации своя ссылка. Иконки по форме адаптированы к мобильным экранам. На большом экране можно воспроизводить любимые клипы или рекламу. Фоном HDRI360 может быть ваш офис или цех.

Современные HTML5 движки, такие как PlayCanvas или PixiJS вполне справляются с созданием целых 3D шоурумов и интерактивных торговых залов, где пользователь, как в игре, может осматривать предметы, здания и ландшафты, кататься на автомобилях или сельхозтехнике, не покидая сайта.

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

Поэтому мы создаем и максимально оптимизируем полноценные 3D модели Ваших товаров, со всевозможными опциями, которые Вы можете предоставить клиенту, как дополнительные услуги. 

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

Пример вращающегося интерактивного 3D объекта. Вы можете вращать его на 360° мышкой или свайпами на экране смартфона.  

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

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

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