[Фича 7] Анимация перемещения объектов

Всем привет! Результаты голосования определили, что нужно всё таки заняться анимацией. Хотели? Держите! Анимация перемещения объектов по осям.

Скилл важный, анимация прикольная, применять можно везде. Поехали учиться!)

Создаём новый Zero Block

Я залью фон с небом. Прикреплять его не буду, можете взять любой подобный фон с фотостока или просто из гугла. Так же под ним я сделаю ещё один зеро блок, но с белым фоном (просто, чтобы было куда скроллить страницу)

Поставлю отображение данного блока по полной высоте окна.

В качестве перемещаемого объекта я возьму силуэт самолета. Уверен, что найти его в интернете вам так же не составит труда. Добавляю самолёт на экран.

Открываем настройки STEP BY STEP ANIMATION у самолёта

Выбираем event: on scroll - действие происходит когда пользователь листает страницу.

Остальные настройки оставляем такими, какие они есть.

Добавляем первый шаг (ADD STEP) и здесь нам нужно только два параметра (если мы хотим, чтобы самолёт просто полетел влево по своей оси)

Distance: параметр, отвечающий за продолжительность анимации. Если мы оставим 100px по умолчанию, это будет значить, что самолёт передвинется на Н пикселей после того, как страница опустится всего на 100px. Самолет пролетит быстро. Если мы поставим 1000px - соответственно самолёт полетит медленнее. Я поставлю именно 1000.

Move X/Y: куда передвинется объект по осям Х и Y. Я хочу чтобы он пролетел влево на 700 пикселей и вниз на 200 пикселей.

Сохраняем и закрываем. Смотрим. Готово! Самолёт медленно летит вниз по диагонали. Применять данный эффект можно во многих дизайнах. Запоминайте и учитесь!)

Всем удачи!)