Zero Block: триггерная (зависимая) анимация
Выберите тип события, по которому будет начинаться анимация. Триггерная анимация может работать только при наведении (on Hover) или клике (on Click).
В блоке Триггер добавьте элемент, клик на который будет начинать анимацию. Нажмите на Add trigger и кликните на элемент в Zero — он будет триггером.
После выбора триггера добавьте шаги анимации. В нашем примере мы добавим обычное перемещение шейпа на 300 px направо при клике на кнопку.
CLICK HERE!
Другие примеры триггерной анимации
Показываем примеры триггерных анимаций и рассказываем, как их настроить
Проверка работы анимации в браузере
Кроме кнопок Play Element и Play All в Тильде есть возможность сразу посмотреть работу анимации в режиме предпросмотра.
Для этого удобно в браузере открыть 2 вкладки: на одной страница, в которой открыт редактор Zero Block, и на второй — та же страница в режиме предпросмотра.
В этом случае при нажатии на кнопку Save в Zero Block изменения будут отображаться на странице предпросмотра после обновления страницы.
Разделы «Справочного центра»:
- Как устроена Тильда
- Настройки сайта
- Редактирование страницы
- Продвижение сайта
- Домен и сертификат
- Интернет-магазин
- Формы приёма данных
- Статистика сайта
- Zero Block
- Конструктор писем
- Тарифы и платежи
- Потоки и новости
- Личный кабинет
- Разработчикам
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc
Zero Block: базовая анимация
В настройках любого элемента в нулевом блоке есть опция добавления анимации. Есть два типа анимации: базовая и более сложная — пошаговая. В этой статье мы рассмотрим функции и особенности базовой анимации.
Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Статья о сложной пошаговой анимации: основные принципы, настройки и примеры
Справка по сложной триггерной анимации: настройка и примеры
Как автоматически импортировать макет из Figma в Zero Block
Определяем базовую структуру дизайна и ускоряем работу с макетом
- Animation — это разные варианты анимации появления элемента;
- Parallax — это настройки эффекта параллакса элемента;
- Fixing — это настройки эффекта фиксации
У анимации появления есть несколько вариантов — простое появление (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%, то объект увеличивается до исходного размера, если больше — то уменьшается.
Zero Block: пошаговая анимация
Посмотрите видеоурок о том, как работать с пошаговой анимацией в Zero Block или прочитайте подробную инструкцию ниже.
Внутри Zero Block есть два режима анимации:
1) Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.
2) Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.
Страница с примерами возможностей пошаговой анимации https://tilda.cc/ru/lp/step-by-step-animation/
Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Справка по простой анимации: фиксации, параллаксу и анимации появления
Справка по сложной триггерной анимации: настройка и примеры
Как автоматически импортировать макет из Figma в Zero Block
Определяем базовую структуру дизайна и ускоряем работу с макетом
Начало работы с пошаговой анимацией
Пошаговая анимация доступна в Zero Block — редакторе для профессиональных дизайнеров. Добавьте его на страницу из библиотеки блоков (в самом низу, после категории «Другое»). Или кликните на иконку Zero Block в меню быстрого добавления блоков внизу страницы.
Нажмите «Редактировать блок» в левом верхнем углу блока, чтобы перейти в режим редактирования.
Добавьте новый элемент, выделите его, откройте настройки, пролистайте до раздела Step by Step Animation и нажмите кнопку Add.
Создание пошаговой анимации отменит все настройки базовой анимации для элемента.
Выбор условия начала анимации
- Element on Screen — анимация начинается при появлении элемента на экране;
- Block on Screen — анимация начинается при появлении на экране всего текущего блока;
- On Scroll — анимация запускается и продолжается во время скролла;
- On Hover — анимация появляется при наведении на элемент;
- On Click — анимация начинается при клике на элемент.
У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.
- Start Trigger — это то, к чему будет привязана анимация или что будет являться ее триггером. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom);
- Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
- Loop — это опция зацикливания анимации.
C помощью опции Test и кнопок Play Element / Play All можно проиграть анимацию этого элемента или всех элементов в блоке.
Добавление шагов анимации
Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться.
Чтобы добавить шаг, нажмите на кнопку Add Step.
Между шагами можно переключаться. При этом синяя обводка элемента означает стандартное состояние, зеленая — редактирование шага.
Чтобы изменить начальное состояние объекта, например, чтобы объект в начале был невидим (значение Opacity равное нулю), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.
У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.
Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.
Как сделать анимацию на мобильных в Zero Block?
Анимация в мобильной версии отключена специально, чтобы пользователям сайтов было удобнее использовать ваш сайт на мобильных.
Она не работает по ряду причин. В частности:
- на мобильных маленький экран: сложные анимации усложнят восприятие информации
- мобильные браузеры не такие мощные: анимация может быть причиной медленной загрузки и, как следствие, уменьшения конверсии.
Если вы все же хотите добавить пошаговую анимацию, то вы можете воспользоваться модификацией от сообщества «Тильдошная» — https://tildoshnaya.com/mobileanimation
Вы можете включить анимацию для мобильных устройств. Для этого зайдите в десктопную версию редактора Zero Block → выделите элемент → добавьте к нему анимацию (например, шаг в пошаговой анимации) → переключитесь на мобильную или планшетную версию Zero Block → включите мобильную анимацию в настройках элемента → Сохраните изменения.
Теперь анимация работает на мобильных устройствах.
Мы собрали для вас подробные инструкции по созданию анимации в Zero Block:
- Пошаговая анимация
- Триггерная анимация в Zero Block
Похожие вопросы
- Как добавить стрелку в Zero Block?
- Есть ли слои в Zero Block?
- Как добавить направляющие линии в Zero Block?
- Как в Zero Block настроить увеличение изображения по клику?
- Что такое Tooltip (тултип) в Zero блоке?