Как сделать такую анимацию лого на html?

Question

[tarya]

Добрый день.

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

https://www.youtube.com/watch?v=lElCyh5k3ps

Вы видели подобное, и где бы такое живое увидеть? Будет ли это работать реально если такое можно сделать. Разумеется без флеш.

Спасибо за совет.

Answer 1

[Михаил Горячкин]

Вот держите накидал по быстрому:
пример
Только в вашем случай вам надо нарезать картинок со всеми геометрическими фигурами и вот тут:

@keyframes fon {
  0% {
    background-color: red;
  }
  30% {
    background-color: blue;
  }
  60% {
    background-color: yellow;
  }
  100% {
    background-color: green;
  }
}

Заменить background-color на background c фоном картинок. Ну и настроить под себя скорость анимации и рп.

Comments

[Nikolay Talanov]

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

[Михаил Горячкин]

Да если надо менять на scroll, то вы правы.

[Михаил Горячкин]

Невнимательно прочитал вопрос)

[tarya]

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

[Михаил Горячкин]

Ну вам виднее, вопрос то ваш) Получается что так.

[Михаил Горячкин]

Вам тогда подойдет, что-то типо этого mynameismatthieu.com/WOW/docs.html. Вот пример анимации по скроллу codepen.io/syedrafeeq/pen/yEJKn

[tarya]

Этим я уже пользовался. Хорошая штука, но меня пугает сама анимация логотипа. У меня такое чуство что мне просто сделали видео - и вперед, реализуй и все.

[Михаил Горячкин]

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