Zero Block: базовая анимация

Как настроить анимацию в нулевом блоке
В настройках любого элемента в нулевом блоке есть опция добавления анимации. Есть два типа анимации: базовая и более сложная — пошаговая. В этой статье мы рассмотрим функции и особенности базовой анимации.
Раздел базовой анимации имеет несколько опций:
  • Animation — это разные варианты анимации появления элемента;
  • Parallax — это настройки эффекта параллакса элемента;
  • Fixing — это настройки эффекта фиксации
Animation
У анимации появления есть несколько вариантов — простое появление (Fade In), появление справа, слева, сверху и снизу (Fade In Right, Fade In Left, Fade In Up,Fade In Down) и появление с увеличением (Zoom In).
В настройках каждого вида анимации появления есть общие опции Duration, Delay и Trigger Offset.

Duration — это время анимации в секундах. Оно позволяет установить, как долго будет появляться элемент;
Delay — задержка перед началом анимации в секундах;
Trigger Offset — это отступ в пикселях от нижнего края Window-контейнера, при котором начнет воспроизводиться анимация.

При использовании анимаций с появлением сверху, снизу, справа или слева появляется дополнительно параметр Distance — это дистанция, которую проходит блок, пока появляется с нужного края.

При использовании появления с увеличением (Zoom In) есть параметр Scale — если он меньше 100%, то объект увеличивается до исходного размера, если больше — то уменьшается.
Parallax
Анимация параллакса имеет две настройки — параллакс может быть по скроллу и по движению мыши.
Параллакс по скроллу
Параллакс по движению мыши
В настройках параллакса по скроллу есть настройка скорости параллакса (Speed). Если скорость указана меньше, чем 100%, то элемент движется медленнее скролла страницы, если скорость больше 100% — то быстрее.

В настройках параллакса по движению мыши есть настройки дистанции по осям X и Y, они устанавливают максимальное отклонение элемента при параллаксе.
Fixing
У анимации фиксации есть выбор настройка области фиксации объекта. Это та область экрана, (верх, центр, низ) относительно которой стартует эффект фиксирования. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom).

Настройка Trigger Offset — это точка начала фиксации объекта относительно выбранного Window Top / Window Center / Window Bottom.

Distance — это расстояние в пикселях, которое должен пройти объект в режиме фиксации.

По анимации фиксации мы рекомендуем прочитать статью «Анимация на Тильде: эффект фиксации», где создание этого эффекта разобрано на конкретном примере.
Made on
Tilda