Анимации появления блоков

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

Каким образом можно добавить анимацию элементов на странице в Тильде?

1. Базовая анимация в настройках стандартных блоков

Каждый блок Тильды имеет определенный набор настроек в зависимости от типа блока. И для всех или большинства элементов блоков можно задать какую-либо анимацию появления на экране. Пример:

Как видно на изображениях сверху, существуют следующие типы базовой анимации для стандартных блоков в Тильде:

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

2. Базовая анимация в настройках элемента в ZERO-блоке

Стандартную анимацию появления элемента на странице можно задать также в том случае, если блок в Тильде собирается в таком инструменте как ZERO-блок:

Типы анимации здесь аналогичны тем, которые имеются в настройках стандартных блоков:

• None - анимация отсутствует,
• Fade In - элемент появляется на экране из прозрачного в видимый без изменения своего размера или положения,
• Fade In UP - элемент появляется на экране из прозрачного в видимый, вылетая снизу вверх,
• Fade In Down -  элемент появляется на экране из прозрачного в видимый, вылетая сверху вниз,
• Fade In Left - элемент появляется на экране из прозрачного в видимый, вылетая справа налево,
• Fade In Right - элемент появляется на экране из прозрачного в видимый, вылетая слева направо,
• Zoom In - элемент появляется на экране из прозрачного в видимый, увеличиваясь в размерах от центра.

3. Step By Step анимация (анимация по шагам) в настройках элемента в ZERO-блоке

Помимо стандартной анимации для элемента можно создать совершенно уникальную сложную анимацию по шагам через настройки элемента в ZERO-блоке:

Триггерами для проигрывания анимации могут служить различные события:

• element on Screen - проигрывание анимации, когда элемент появляется на экране,
• block on Screen - проигрывание анимации, когда блок появляется на экране,
• on Scroll - проигрывание анимации по скроллу,
• on Hover - проигрывание анимации при наведении курсора мыши,
• on Click - проигрывание анимации при клике по элементу.

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

• duration - продолжительность проигрывания анимации,
• move x, y - движение по осям х и у элемента,
• scale x, y - увеличение или уменьшение элемента относительно осей х и/или у,
• opacity - изменение прозрачности элемента,
• rotate - поворот элемента,
• easing - стиль проигрывания анимации (линейная, с ускорением, с замедлением и т.д.)
• delay - продолжительность паузы перед проигрыванием анимации.

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

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

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

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

Итак, еще один способ добавления анимации:

4. Анимация, описанная с помощью пользовательского кода, использующая возможности CSS, JavaScript.

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

Ну что же, спасибо за внимание! ;)

Спасибо, что читаете мой блог.

Желаю Вам удачи в Вашем деле!