Анимация шторка
Шаг 1: Создаём шейп и накладываем поверх фотографии
Шаг 2: Добавляем скорость и уводим шейп вниз фотографии
Шаг 2: Добавляем скорость и уводим шейп вниз фотографии
element on screen
on window bottom
on window bottom
element on screen
on window bottom
on window bottom
Шаг 1: Убираем скорость (duration), в поле Move, значение Y ставим "-" и половину высоты шейпа, в поле Scale по Y ставим значение 0, в поле Opacity ставим значение 0
Шаг 2: Остаются те же настройки, только Opacity ставим 100%
Шаг 3: Добавляем скорость анимации, в разделе Move ставим 0, в поле Scale ставим 100
Шаг 2: Остаются те же настройки, только Opacity ставим 100%
Шаг 3: Добавляем скорость анимации, в разделе Move ставим 0, в поле Scale ставим 100
Анимация фон из круга
Шаг 1: Создаём маленький круг (40 на 40) и распологаем его там, где он должен появляться
Шаг 2: Делаем шаг 1 и ставим дистанцию 500 px и Scale на 5000%
Шаг 2: Делаем шаг 1 и ставим дистанцию 500 px и Scale на 5000%
on Scroll
on window bottom
on window bottom
on Scroll
on window bottom
on window bottom
Нужен код, чтобы шейп не был пиксельным
Почему-то если расположить блок пониже, что анимация не работает
Шаг 1: Делаем круг на 5000 px и ставим по центру, убираем дистанцию до 0 и Scale до 0
Шаг 2: Возвращаем Scale на 100% и добавляем дистанцию (чем больше дистанция, тем плавнее будет анимация)
Шаг 2: Возвращаем Scale на 100% и добавляем дистанцию (чем больше дистанция, тем плавнее будет анимация)
Анимация статичного фото
About Our Classes
Our classes provide a gateway into the world of dance, connecting young people and communities to artistic practice. We also engage in a range of inspirational and high-quality participatory activities, both nationally and internationally.
Learn more Анимация: композиция собирается по скроллу
on Scroll
on window top
trigger ofsset: 190 (расстояние от элемента до начала блока)
on window top
trigger ofsset: 190 (расстояние от элемента до начала блока)
on Scroll
on window top
trigger ofsset: 240 (расстояние от элемента до начала блока)
on window top
trigger ofsset: 240 (расстояние от элемента до начала блока)
Дублируем анимацию и меняем для каждого элемента расположение вне зоны видимости и тригер оффсет
Для бумаки, которая сначала прозрачная, а потом появляется.
Для бумажки, которая видна всё наоборот
Для бумажки, которая видна всё наоборот
Шаг 1: Убираем дистанцию и уводим в прозрачность на 0%
Шаг 2: Дистанция 0 px, прозрачность 100, и уводим элемент из зоны видимости
Шаг 3: Дистанция 400 px, возвращаем на исходное положение (Move x0 и y0) и фиксируем
Шаг 4: Дистанция 600 рх, зафиксирован
Шаг 2: Дистанция 0 px, прозрачность 100, и уводим элемент из зоны видимости
Шаг 3: Дистанция 400 px, возвращаем на исходное положение (Move x0 и y0) и фиксируем
Шаг 4: Дистанция 600 рх, зафиксирован
Шаг 1: Убираем дистанцию и уводим в прозрачность на 0%
Шаг 2: Дистанция 500 px, прозрачность 0
Шаг 3: Дистанция 500 px, прозрачность 100
Шаг 2: Дистанция 500 px, прозрачность 0
Шаг 3: Дистанция 500 px, прозрачность 100
анимация
Анимация: по скроллу меняется сцена
on Scroll
on window top
trigger ofsset: 190 (расстояние от элемента до начала блока)
on window top
trigger ofsset: 190 (расстояние от элемента до начала блока)
Шаг 1: Дистанция 333 рх, прозрачность 0 и зафиксирован
Шаг 2: Дистанция 1 px, прозрачность 100
Шаг 3: Дистанция 333 px, прозрачность 100
Шаг 4: Дистанция 1 рх, прозрачность 0
Шаг 5: Дистанция 332, прозрачность 0
Шаг 2: Дистанция 1 px, прозрачность 100
Шаг 3: Дистанция 333 px, прозрачность 100
Шаг 4: Дистанция 1 рх, прозрачность 0
Шаг 5: Дистанция 332, прозрачность 0
3 элемент
2 элемент
1 элемент
Дистанция 1000 рх, надо высчитывать для каждого элемента время движение и видимости
Шаг 1: Дистанция 666 рх, прозрачность 0 и зафиксирован
Шаг 2: Дистанция 1 px, прозрачность 100
Шаг 3: Дистанция 333 px, прозрачность 100
Шаг 2: Дистанция 1 px, прозрачность 100
Шаг 3: Дистанция 333 px, прозрачность 100
Шаг 1: Дистанция 333 рх, прозрачность 100 и зафиксирован
Шаг 2: Дистанция 1 px, прозрачность 0
Шаг 3: Дистанция 666 px, прозрачность 0
Шаг 2: Дистанция 1 px, прозрачность 0
Шаг 3: Дистанция 666 px, прозрачность 0
анимация
Фото 3
Фото 2
Фото 1
Анимация: паралакс
Клубничка
Анимация: фото поверх и позади текста
анимация
Анимация: горизонтальный скролл
on Scroll
on window top
on window top
Шаг 1: Начинаем с конца, выставляем элемент, где он должен оказаться на блоке Move X, это значение ставим в поле дистанции без "-", фиксируем элемент
Шаг 2: Копируем анимацию для всех элементов, меняем только триггер оффсет для каждого
Шаг 3: Увеличиваем длину блока на расстояния дистанции самого дальнего элемента
Шаг 2: Копируем анимацию для всех элементов, меняем только триггер оффсет для каждого
Шаг 3: Увеличиваем длину блока на расстояния дистанции самого дальнего элемента
Фото 4
Фото 3
Фото 2
Фото 1
Анимация: Фиксация элементов
on Scroll
on window center
on window center
Шаг 1: Триггер оффет будет длина элемента/2 со знаком "-" (чтобы элемент был ровно по центру), выставляем дистанцию и фиксируем элемент и можно добавить увеличение или уменьшение
Шаг 2: Дистанция 100, прозрачность 0
Шаг 2: Дистанция 100, прозрачность 0
Анимация: Фиксация элементов
