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 в Тильде, установить на них ссылки, а при наведении мыши строка будет останавливаться.
Пример использования
Бегущая строка будет останавливаться только на десктопной версии сайта, так как в мобильных устройствах нет эффекта наведения.
Смотреть все модификации
Узнать как сделать такую же смену фона
Написать мне в телеграм
Предложить идею для модификации
Смотреть все модификации
Узнать как сделать такую же смену фона
Написать мне в телеграм
Предложить идею для модификации
Предложить идею для модификации
Опишите механику модификации, которой вам не хватает. Приложите ссылку, скриншот или видео. Возможно именно ваша идея будет реализована и добавлена следующей.
Инструкция
В zero block создаем текстовые элементы, назначаем им класс .running-line-1. Делаем им привязку к window container и располагаем через равное расстояние, например 20px. Назначаем им нужные ссылки.
Создаём копии текстовых элементов и размещаем их следом за ранее созданными с тем же шагом 20px. Это нужно для того, чтобы анимация бегущей строки повторялась непрерывно.
Измеряем шаг нашей анимации. Для этого Посмотрим на координаты по оси x для одинаковых текстовых элементов. Например: у меня 4 разных текстовых элемента. После создания их копий стало 8 текстовых элементов. Смотрим координаты x у первого и пятого элемента. У первого x=20px, а у пятого элемента x=1880px. Их Разница составляет 1860px. Это и есть шаг нашей анимации. Он нам пригодится дальше.
Копируем первый скрипт и вставляем его в блок T123. В нём указывается шаг и время анимации в милисекундах для каждого из разрешений.
Копируем второй скрипт и вставляем его в блок T123. В нём ничего менять не нужно.
Как сделать бегущую строку в тильде
Сделать 2 варианта бегущей строки из текста и 2 из картинок.
1) Строка, которая едет влево сама, независимо от скролла, от края до края сайта.
2) Строка, которая едет влево-вправо при скролле вниз-вверх, соответственно.
Строка должна расширяться на весь экран по ширине, без отступов по краям.
Настраиваться должна скорость движения, а для текстового варианта строки — чередование четных/нечетных «кусочков» строки оформлением текста — обычный/outline (ну или просто стиль для нечетных сделать).
В саму строку должен превращаться обычный текстовый блок и блок галереи, с привязкой по его ID.
Сделать опцию для автоматических строк — остановка при наведении курсора! И для текстов и для картинок.
Как остановить бегущую строку при наведении курсора?
Модификация поможет останавливать движение бегущей строки(блок DV13) при наведении на нее курсора мыши. Дополнительно можно кастомизировать блок(добавить линии или сделать обводку текста)
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Генератор кода
Останаливать при наведении
Толщина линий
Цвет линий
Толщина обводки текста
Цвет обводки текста
Прозрачный цвет текста
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
КОПИРОВАТЬ КОД
- Инструкция
- Пример
1. Создаем блок бегущей строки VD13, копируем id блока и вставляем в генератор.
2. При необходимости делаем дополнительные настройки в генераторе:
Останавливать при наведении — если включить, то при наведении курсора на строку она будет останавливаться.
Толщина и цвет линий — добавляет на строку сверху и снизу линии с указанным цветом и толщиной.
Толщина и цвет обводки текста — добавляем обводку текста с указанной толщиной и цветом.
Прозрачный цвет текста — если включить, то цвет текста будет прозрачный(останется только обводка). Если отключено то цвет текста будет тот который вы указали настройках блока.
3. Копируем готовый код и вставляем в HTML блок Т123
Примечание! Обводка текста не всегда может работать корректно так как это зависит от шрифта который вы используете.
Если на странице несколько бегущих строк и нужно чтобы изменения применились ко всем сразу, то поле id блока оставляем пустым. Если нужно чтобы к разным строкам применялись разные настройки, то нужно сгенерировать несколько кодом изменяя при этом Id.