Анимация

Анимация

14.09.17

Делаем приятную глазу, не вульгарную и не навязчивую анимацию, там где она может присутствовать.

Сделаем прелоадер из логотипа, условно:

пример прелоадера

Первый экран

  1. После прелоадера, который нужен чтобы прогрузить весь сайт - появляется график, предположительно слева направо
  2. Плавно появляется главный текст, и телефон
  3. Анимация перехода с первого на второй экран как i2bf.com или https://chulakov.ru/
  4. Значок скрола https://codepen.io/hexagoncircle/pen/akWOdE


Второй экран

  1. После перелистывания, появляется фотка, за ней график (в нижней части) и текст. Текст при скроле с паралаксом.
  2. Далее иконки - их можно анимировать, весь блок тоже с паралаксом
  3. Блок с форматами: плавно появляется заголовок и подпись к нему, далее слева направо появляется серая полоска, и под ней слева направо ссылки с форматами.

4. Блок с девайсами сам по себе интерактивный, внутри будут гифки, которые раскрывают суть формата


5. Блок «Запустите рекламу», тут плашка от скорола с паралаксом наплывает на диагональ:

6. Вертикальный «Слайдер»

7. Плавное и постепенное появление: Заголовок - подпись - логотипы