Тренажёр
Сбс анимация.
on scroll
Урок 20
Чтобы посмотреть тренажёр, откройте его через десктопную версию
Пример анимации из урока:
Попробуй зафиксировать этот элемент и назначить стартовый триггер от центра экрана, а после — от верха экранга
На каждом этапе не забывай сохранять изменения в блоке и опубликовывать эту страницу, чтобы посмотреть результат
Настрой анимацию по скроллу движения элемента вправо + поворот на 180о и движение влево + поворот на 180о
Инструкция:
Ниже находятся один элемент, на который
нужно настроить анимацию
01
03
02
Продублируй квадрат, чтобы их стало 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
Шпаргалка
посмотреть
Made on
Tilda