Базовая и пошаговая анимация в Тильда [простым языком]

Привет, друзья! На связи Евгений Тридчиков и в этом видео мы разберем виды анимации в Тильда.

Перемещаемся на тестовую страницу. Во-первых, как видите, у готовых блоков есть базовые настройки анимации. Это простые эффекты для текста, кнопок, которые вы можете изучить на досуге. Не будем на этом останавливаться.

Базовая и пошаговая анимация в Тильда [простым языком]
Анимация готового блока Тильда

Переходим в редактирование зеро блока, выделим элемент, опции, скролл вниз. И здесь нас интересует две последние панели настроек. Это базовая и пошаговая анимация.

Базовая и пошаговая анимация в Тильда [простым языком]
Базовая и пошаговая анимация в нулевом блоке

Базовая анимация позволяет настроить эффект появления элемента на экране, параллакс эффект и установить фиксированное положение элемента.

Базовая анимация нулевого блока

Среди эффектов появления: слева, справа, снизу, сверху и увеличение. При выборе определенного эффекта появляются дополнительные настройки. Здесь у вас такие возможности, как:

  • продолжительность анимации (в секундах),
  • дистанция, которую преодолевает анимация элемента (в пикселях),
  • задержка перед началом анимации (в секундах),
  • и расстояние до края экрана, после которого запускается анимация.

Чтобы проверить, как работает анимация, нажмите кнопку “Play Element”. А для тестирования всей анимации в блоке, нажмите кнопку “Play All”.

Параллакс

Далее параллакс эффект. Триггером может быть скролл. Здесь мы выбираем скорость движения элемента относительно скорости скролла (в процентах). Триггером может быть и движение курсора. Тогда мы выбираем смещение элемента по оси Х и У относительно местоположения курсора на экране (в пикселях).

Базовая и пошаговая анимация в Тильда [простым языком]
Базовая анимация в нулевом блоке Тильда

Фиксирование

Далее фиксация элемента относительно экрана: вверх, центр или низ. Здесь можно добавить расстояние между элементом и выбранным краем экрана. А также указать расстояние в пикселях, которое вы будете скролить и элемент будет сохранять фиксированное положение.

Обратите внимание, что работу параллакса и фиксированной анимации вы не можете проверить в режиме редактирования.

Вам нужно сохраниться, выйти и запустить режим превью. Это хорошо, потому что только попытками вы поймете логику работы.

Пошаговая анимация нулевого блока

Базовая анимация это прикольно, но самые интересные и вау-эффекты достигаются за счет пошаговой анимации. Обратите внимание, что пошаговая анимация замещает базовую.

Базовая и пошаговая анимация в Тильда [простым языком]
Триггер пошаговой анимации в Тильда

Жмем добавить и выбираем триггер для начала анимации: появление элемента на экране, появление блока на экране, скролл, ховер, клик.

Далее вы можете уточнить триггер с помощью расстояния до края экрана, выбрать зацикливание анимации, протестировать анимацию. Ниже, собственно, шаги анимации, то есть сам сценарий.

А внизу подсказка о том, что можно изменить состояние элемента по умолчанию с помощью первого шага, где следует задать duration (продолжительность анимации) равным 0.

Жмем добавить первый шаг. Перед вами настройки анимации, среди которых:

  • продолжительность,
  • смещение по осям,
  • масштаб,
  • непрозрачность,
  • поворот,
  • характер анимации (линейная, замедление, отскок),
  • и задержка.
Базовая и пошаговая анимация в Тильда [простым языком]
Настройки первого шага пошаговой анимации

Для начала я рекомендую определить сценарий, затем разбить его на шаги, и задать свойства элемента на каждом шаге. А поможет вам в этом супер крутой учебник пошаговой анимации от Тильда.

Здесь представлены пошаговые инструкции около 20 самых популярных сценариев. Тут и ховер для карточек, и зацикленный кораблик на волнах, и сборка композиции из разных элементов – в общем все, что хотите.

Сейчас вам нужно уделить пару часов этим инструкциям, повторить у себя в проекте и буквально за один день вы освоите пошаговую анимацию в Тильда.

Смотреть видео

В следующем уроке мы разберем настройку целей в Яндекс Метрике и Google Analytics для форм на Тильде. Если видео получилось полезным, поделитесь с коллегами. С вами был Евгений Тридчиков, и я желаю вам великолепного дня!

Рейтинг
( 6 оценок, среднее 5 из 5 )
Евгений Тридчиков/ автор статьи
Загрузка ...
CONTEXT-KILL.BY