Как анимировать кнопку в зеро блоке

Hover анимация кнопок в Tilda Publishing

Tilda Publishing – один из самых популярных конструкторов сайтов, который позволяет создавать высококачественные сайты, не имея опыта веб-дизайна. Но как сделать сайт на Тильде более привлекательным и интерактивным? Hover анимация кнопок в Tilda – один из способов.

Hover — это анимация, которая происходит при наведении на объект. В Тильде это можно легко сделать, используя Zero Block – один из готовых блоков, который можно добавить на любую страницу сайта. В Zero Block уже встроены готовые эффекты, которые можно настроить под свой сайт. Но, стандартный функционал довольно ограниченный. Поэтому имеет смысл воспользоваться сторонним кодом, если вы хотите сделать на своём сайте что-то особенное!

Как сделать Hover эффекты для кнопок в Tilda

Базовая анимация

Для начала, давайте настроим базовые эффекты при наведении, используя css код:

Создайте zero block.
Нажмите на кнопку «Редактировать блок».
Уберите стандартное наполнение блока.
Нажмите на кнопку «+» и выберите «Add Button».
Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
Пропишите любой класс для вашей кнопки.
Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
Нажмите на кнопку «+» и выберите пункт «Add Html».
Зайдите в редактор кода двойным кликом на блок.
Удалите стандартный код и пропишите следующее:

Для того, чтобы быстро получить код любого градиентного фона, попробуйте генератор градиента онлайн.

Продвинутая анимация

Мы рассмотрели некоторые из базовых css свойств, а теперь перейдём к более продвинутым и разберем несколько вариантов анимации кнопок при наведении в Tilda.

Hover анимация кнопок в Tilda. Вариант 1

Создайте zero block.
Нажмите на кнопку «Редактировать блок».
Уберите стандартное наполнение блока.
Нажмите на кнопку «+» и выберите «Add Button».
Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
Пропишите любой класс для вашей кнопки.
Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
Нажмите на кнопку «+» и выберите пункт «Add Html».
Зайдите в редактор кода двойным кликом на блок.
Удалите стандартный код и пропишите следующее:

Hover анимация кнопок в Tilda. Вариант 2

Создайте zero block.
Нажмите на кнопку «Редактировать блок».
Уберите стандартное наполнение блока.
Нажмите на кнопку «+» и выберите «Add Button».
Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
Пропишите любой класс для вашей кнопки.
Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
Нажмите на кнопку «+» и выберите пункт «Add Html».
Зайдите в редактор кода двойным кликом на блок.
Удалите стандартный код и пропишите следующее:

Hover анимация кнопок в Tilda. Вариант 3

Создайте zero block.
Нажмите на кнопку «Редактировать блок».
Уберите стандартное наполнение блока.
Нажмите на кнопку «+» и выберите «Add Button».
Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
Пропишите любой класс для вашей кнопки.
Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
Нажмите на кнопку «+» и выберите пункт «Add Html».
Зайдите в редактор кода двойным кликом на блок.
Удалите стандартный код и пропишите следующее:

Hover анимация кнопок Tilda. Вариант 4

Создайте zero block.
Нажмите на кнопку «Редактировать блок».
Уберите стандартное наполнение блока.
Нажмите на кнопку «+» и выберите «Add Button».
Нажмите на кнопку правой кнопкой мыши и выберите пункт «Add css class name».
Пропишите любой класс для вашей кнопки.
Удалите стандартную цветовую заливку вашей кнопки (BG COLOR), чтобы она стала прозрачной.
Нажмите на кнопку «+» и выберите пункт «Add Html».
Зайдите в редактор кода двойным кликом на блок.
Удалите стандартный код и пропишите следующее:

Заключение

Хоть и использование программирования для создания hover эффектов в Tilda может показаться сложным для новичков в веб-разработке, но на самом деле это отличный способ добавить красивые и эффективные анимации на свой сайт. Если вы выполните все действия, описанные в этой статье, то обнаружите, что это не так уж и сложно. Главное, не бойтесь экспериментировать и создавать что-то новое, используя возможности, которые дает Tilda в купе со сторонним кодом.

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

Интересный эффект появления кнопки при скролле на Тильде

Анимация кнопки в Тильде

Нам потребуется zero block тильды. Для примера, возьмем страницу из шаблонов и переконвертируем в зеро.

Анимация при скролле тильда

Затем выделим элемент и откроем панель настроек.

Анимация тильда зеро

Идем в раздел пошаговая анимация тильды, и выбираем анимацию при скролле.

sbs анимация тильда

Настраиваем необходимые параметры, чтобы закрепить блок при скролле в тильде есть параметр FIX, по умолчанию там NONE, нужно заменить на FIXED. Тогда наша кнопка будет ездить за пользователем. Далее нажимаем сохранить и возвращаемся в редактор, нажимаем ПУБЛИКОВАТЬ.

анимация кнопки в зеро блоке тильда

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

Zero Block: пошаговая анимация

1) Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.

2) Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.

Страница с примерами возможностей пошаговой анимации https://tilda.cc/ru/lp/step-by-step-animation/

Как автоматически импортировать макет из Figma в 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 — это опция зацикливания анимации.

Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться.

Чтобы добавить шаг, нажмите на кнопку Add Step.

У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.

Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.

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

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

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

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.

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