Zero Block: базовая анимация
В настройках каждого вида анимации появления есть общие опции Duration, Delay и Trigger Offset.
Duration — это время анимации в секундах. Оно позволяет установить, как долго будет появляться элемент;
Delay — задержка перед началом анимации в секундах;
Trigger Offset — это отступ в пикселях от нижнего края Window-контейнера, при котором начнет воспроизводиться анимация.
При использовании анимаций с появлением сверху, снизу, справа или слева появляется дополнительно параметр Distance — это дистанция, которую проходит блок, пока появляется с нужного края.
При использовании появления с увеличением (Zoom In) есть параметр Scale — если он меньше 100%, то объект увеличивается до исходного размера, если больше — то уменьшается.
Что такое эффект при скролле в тильде
Katherine Matilda Swinton is a British actress, model, and artist. She is known for her roles in both arthouse films and large-scale Hollywood productions.
She won the Academy Award for Best Supporting Actress and the BAFTA Award for Best Actress in a Supporting Role for her performance as Karen Crowder in the 2007 film Michael Clayton.
Katherine Matilda Swinton was born on 5 November 1960 in London, the daughter of Judith Balfour (née Killen; 1929–2012) and Sir John Swinton. She has three brothers. Her father is a retired major general in the British Army, and was Lord Lieutenant of Berwickshire from 1989 to 2000. Her mother was Australian.
Swinton began her career in experimental films directed by Derek Jarman, starting with Caravaggio (1986), followed by The Last of England (1988), War Requiem (1989), and The Garden (1990). Swinton won the Volpi Cup for Best Actress at the Venice Film Festival for her portrayal of Isabella of France in Edward II (1991). She next starred in Sally Potter’s Orlando (1992), and was nominated for the European Film Award for Best Actress.
Анимации появления блоков
После добавления блока на странице, после его опубликования, без специальной настройки анимации элементов в нем, при загрузке страницы в браузере мы тем не менее увидим едва уловимую анимацию появления элементов на мониторе. Эта микро-анимация встроена в Тильде по умолчанию. В настройках конкретной страницы ее можно отключить:
Каким образом можно добавить анимацию элементов на странице в Тильде?
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.
В данном случае могут применяться какие угодно решения к элементам. Ограничений практически нет. Могут быть сложности в реализации в зависимости от уровня профессионализма программиста, который будет эти решения реализовывать.