Исходник логотипа был предоставлен объединённым вектором на одном слое в формате Adobe Illustrator. Пришлось практически перерисовывать с нуля, разбивать по слоям и переводить в SVG формат. Вывели буквы, причём повторяющиеся символы букв в SVG рисунке продублировали тегом </use>, что позволило заметно облегчить размер векторного изображения.
Лодку, на которой плывёт главный герой, пришлось дорисовывать, так как по нашей задумке волны должны были иметь свою анимацию.
В css-коде добавили моргание глазами, также плавное покачивание лодки, бровей и частей те
ла главного героя.
В принципе, можно было расширить программную анимацию анимацией облаков (а также оживить птиц) и дерева на заднем фоне, но изначальная задача в этом не ставилась.
Итоговый размер анимации составил менее 30 Килобайт (практически моментальная загрузка ролика). Оценить скорость загрузки анимации и саму программную анимацию (включая её код) можно по ссылке на проект
https://чудесазеленойдолины.рф/Если вам интересны подобные шустрые и лёгкие анимации для веб-сайтов и интерактивных мультимедийных проектов - обращайтесь :)
Нет комментариев