Мы используем файлы cookie, чтобы улучшить ваш опыт на нашем веб-сайте.

Анимация товара для Loom Footwear

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

Анимация интересная и вовсе не сложна в исполнении. 3D модель кроссовка нарезается на 4 одинаковых по размерам файла, которые имеют прозрачный фон:

Затем делается стандартная структура в html и с помощью position: absolute; все 4 картинки встают друг на друга и выходит, что мы видим цельный кроссовок состоящий из наложенных фото. Выглядит это вот так:

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



.image-t1-part-1 {
   animation: top-1 12s infinite ease-in-out;
}
@keyframes top-1 {
 0% {
   transform: translate3d(0px, 111px, 0px);
 }
 25% {
   transform: translate3d(0px, 30px, 0px);
 }	
 75% {
   transform: translate3d(0px, 30px, 0px);
 }
 100% {
   transform: translate3d(0px, 111px, 0px);
 }
}

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

Оставьте первый комментарий