Сегодня хочу поделиться вот такой интересной анимацией, которую попросили разработать для проекта 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);
}
}
И в конце добавляется анимация для текста, чтобы он так же появлялся и исчезал синхронно с анимацией. Вот собственно и все. Оригинал можно посмотреть на сайте фирмы: Перейти