Каким образом можно добавить анимацию элементов на странице в Тильде?
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.
В данном случае могут применяться какие угодно решения к элементам. Ограничений практически нет. Могут быть сложности в реализации в зависимости от уровня профессионализма программиста, который будет эти решения реализовывать.
Ну что же, спасибо за внимание! ;)
Спасибо, что читаете мой блог.
Желаю Вам удачи в Вашем деле!
