Тренажёр
Сбс анимация.
on scroll
Урок 20
Чтобы посмотреть тренажёр, откройте его через десктопную версию
Пример анимации из урока:
Попробуй зафиксировать этот элемент и назначить стартовый триггер от центра экрана, а после — от верха экранга
На каждом этапе не забывай сохранять изменения в блоке и опубликовывать эту страницу, чтобы посмотреть результат
Настрой анимацию по скроллу движения элемента вправо + поворот на 180о и движение влево + поворот на 180о
Инструкция:
Ниже находятся один элемент, на который
нужно настроить анимацию
01
03
02
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
Продублируй квадрат, чтобы их стало 4 и попробуй настроить анимацию «разлетания» этих элементов
Можешь пройтись по всем
анимациям из урока:
Тоже самое, но наоборот, попробуй настроить анимацию «собирания» этих элементов
Оставь 1 квадрат и добавь к нему текст. Тексту и квадрату задай фиксацию, а квадрату добавь поворот на 360о. Не забудь правильно настроить триггер оффсет
03
01
02
Доп.задание 02
Шпаргалка
Step 2:
Distance: 250
Move x:-250 y:0
Rotate: 180
Fix: fixed
Start trigger:
On window center / on window top
Step 2:
Distance: 250
Move x:-250 y:0
Rotate: 180
Event:
On scroll
02
01
задания
Event:
On scroll
Step 2:
Distance: 250
Move x: 0 y:0
Rotate: 360
Step 1:
Distance: 250
Move x: 250 y:0
Rotate: 180
Step 1:
Distance: 250
Move x: 250 y:0
Rotate: 180
Fix: fixed
Event:
On scroll
01
Доп.задание 01
Event:
On scroll
Start trigger:
On window center
Step 1:
Distance: 250
Move x: 500 y:500
Rotate: 360
Event:
On scroll
Event:
On scroll
Step 2:
Distance: 250
Move x: -500 y:-500
Rotate: 360
Step 2:
Distance: 250
Move x: -500 y:500
Rotate: 360
Event:
On scroll
Step 2:
Distance: 250
Move x: 500 y:-500
Rotate: 360
02
01
01
02
Start trigger:
On window center
Start trigger:
On window center
Start trigger:
On window center
Start trigger:
On window center
Step 2:
Distance: 0
Move x: 500 y:500
Rotate: 0
Event:
On scroll
Step 2:
Distance: 250
Move x: 0 y:0
Rotate: 360
01
Start trigger:
On window center
Step 2:
Distance: 0
Move x: 500 y:500
Rotate: 0
Event:
On scroll
Step 2:
Distance: 250
Move x: 0 y:0
Rotate: 360
01
Start trigger:
On window center
Step 2:
Distance: 0
Move x: 500 y:500
Rotate: 0
Event:
On scroll
Step 2:
Distance: 250
Move x: 0 y:0
Rotate: 360
01
Start trigger:
On window center
Step 2:
Distance: 0
Move x: 500 y:500
Rotate: 0
Шпаргалка