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