Анимация в конструкторе «Тильда»

tilda

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

Существует 3 основных правила анимации:

  1. Анимируйте важные элементы, выполняющие определенные функции на сайте: кнопки, пункты меню и активные ссылки.
  2. Знайте меру. Создавая анимацию, постарайтесь не делать эффекты чрезмерно навязчивыми, поскольку это может вызвать у пользователя раздражение.
  3. Убедитесь, что анимация отображается корректно. Например, эффекты не должны тормозить или зависать.

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

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

Базовая анимация — это набор наиболее популярных эффектов, часть которых взята из стандартного набора, например, появление элемента через прозрачность (слева/справа или сверху/снизу), увеличение, параллакс, фиксация при прокрутке и другие. Пользователь может самостоятельно изменять параметры анимации: увеличивать или уменьшать отступы, настраивать подходящее расстояние, выбирать скорость появления и задержку определенных элементов.

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

Настройки анимации включают в себя следующие характеристики:

  • продолжительность;
  • смещение по осям X, Y;
  • прозрачность;
  • поворот;
  • масштаб;
  • вид анимации (линейная, отскок и т.д.);
  • задержка.

Для сравнения: стандартный анимированный элемент после появления на странице всегда принимает статичное положение или фиксируется во время прокрутки, в то время как использование step-by-step анимации дает намного больше преимуществ. Например, вы можете влиять на скорость, уровень прозрачности, траекторию движения элемента, поворачивать его или задавать ему действия при наведении курсора. Это значительно оживляет сайт и позволяет реализовать практически любые креативные идеи. Также вы можете использовать зацикленную анимацию в «Тильде», чтобы пользователь мог дольше наблюдать за ней и наслаждаться. Именно такие эффекты создают уникальный образ и запоминаются посетителям сайта.

В первую очередь пошаговая анимация в Zeroblock рассчитана на профессиональных дизайнеров. Для того, чтобы воспользоваться всеми ее возможностями, зайдите в библиотеку блоков (после категории «Другое») и добавьте на страницу Zeroblock или воспользуйтесь меню быстрого добавления.

При создании любого вида step-by-step анимации необходимо выбрать условия, при которых она начнет проигрываться (Event). В «Тильде» вы можете задать следующие условия:

  1. Element on Screen — эффект срабатывает при появлении элемента на экране.
  2. Block on Screen — анимация проигрывается при появлении определенного блока.
  3. On Scroll — анимация привязана к прокрутке страницы.
  4. On Hover — эффект появляется при наведении на отдельный элемент.
  5. On Click — анимация срабатывает после клика на элемент.

Благодаря опции Test и специальных кнопок Play Element/Play All вы можете предварительно просмотреть анимацию элемента или всех элементов в блоке.

Функционал «Тильды»: анимация кнопки

Один из вариантов анимации, который делает взаимодействие с кнопками интереснее, — это ховер эффект. Например, при наведении курсора на элемент, он меняет цвет, увеличивается, происходит инверсия или смещение и т.д.

Анимировать кнопку можно как при помощи стандартных элементов из библиотеки блоков, так и Zeroblock:

  1. Ховер эффект в стандартным блоке.
    Этот вариант наиболее простой и понятный, даже неопытный пользователь сможет разобраться, как работать со стандартным блоком. Для этого достаточно найти в меню конструктора раздел «“Форма и кнопка» и воспользоваться дополнительными настройками. Например, выбрать смену фона кнопки при наведении (так вы получите эффект инверсии).
  2. Ховер эффект в Zero-блоке.
    Для создания нужного эффекта следует обратиться к пошаговой анимации. В настройках блока воспользуйтесь редактированием элементов (Edit) и выберите Event → on Hover (событие по наведению). После этого укажите нужные параметры, например, увеличение кнопки при наведении до 110% в течение 0.1 секунды. Возвращение кнопки в нормальное состояние происходит автоматически и не требует дополнительной настройки.

    Также в число наиболее популярных анимаций кнопки в Tilda входят:

    • Эффекты с тенями (всплеск тени, появление при наведении и пр.);
    • Авто-блик;
    • Всплеск внутри при наведении;
    • Эффект качелей;
    • Увеличение;
    • Дрожание.

Работает ли анимация в мобильной версии «Тильды»?

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

Анимация не работает в силу следующих причин:

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

Если вы все-таки хотите расширить возможности платформы Tilda и добавить анимацию в мобильную версию сайта, то можете воспользоваться модификациями и скриптами, доступными в сети.