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 — задержка перед выполнением анимации.
[Фича 5] Делаем зацикленную круговую анимацию
Всем привет! Подготовил совсем небольшой урок, наверное самого распространённого эффекта с анимации, который дизайнеры делают на тильда.
Анимация простая, делается в три клика, выглядит эффектно. Поехали!
Анимация выглядит примерно так.
Шаг 1. Готовим изображение
Берём изображение, которое будет крутиться вокруг своей оси. Я сделал его в .png, но в очередной раз повторю, что лучше всего использовать svg формат. Скачать моё изображение можно тут: https://imgur.com/a/qru99dy
Шаг 2. Добавляем изображение в Zero Block
Пошаговая анимация доступна только в Zero Block, поэтому идём туда и добавляем наше изображение в контейнер рабочей области.
Шаг 3. Пошаговая анимация
Открываем настройки изображения, открываем Step by step animation.
Устанавливаем:
— Event: element on screen (действие выполняется, как только изображение появляется на экране)
— Loop: Loop (анимация воспроизводится снова и снова, непрерывно)
— Добавляем первый шаг (Step 1)
— Duration: длительность цикла анимации, чем она больше — тем медленнее будет крутиться наш круг. Например установим значение 5 — круг обернется в течение 5 секунд.
— Rotate: ставим тут 360 (наше изображение обернётся вокруг своей оси на 360 градусов).
Закрываем, сохраняем и публикуем. Готово!
Анимация появления текста в Тильде
Чтобы создать анимацию текста в Тильде, необходимо создать ZeroBlock, и выбрать элемент текст, написать любой текст. Далее потребуется вставить html код в блок Т123 из библиотеки tilda. Публикуем страницу и нажимаем инструменты разработчика, нам нужно найти нужный css класс элемента, скопировать его и подставить в код. Можно проделывать эту операцию для нескольких текстов. Снова публикуем и у нас получилась интересная анимация текста в Тильде. Пользуйтесь в своих проектах!
Инструкция:
Код запускающий эффект текста в тильде
Зацикленная анимация на Тильда | Как зациклить анимацию в Тильде? Следуй этим простым шагам!
Зацикленная анимация на Тильда создаётся исключительно в Zero Block. Для создания анимации мы определяем тип движения, например, кручение объекта по часовой стрелки и устанавливаем настройку «loop». Это самы простой ответ на вопрос – как зациклить анимацию в Тильде. — Полный курс по созданию Landing page — https://korzhoff.ru/full-course-tilda Ссылка для регистрации на конструкторе Tilda — https://tilda.cc/?r=1472289 Ссылка для регистрации домена — https://www.reg.ru/?rlink=reflink-5197099 Подписывайтесь на канал — https://www.youtube.com/c/ДаниилКоржов Заказать разработку сайта на Tilda — http://korzhoff.ru Поддержать автора донатом: Карта Тинькофф — 4377 7237 4300 8850 (Получатель Коржов Даниил Сергеевич) Также поддержать можно тут: https://vk.com/manualsoft?source=description&w=donut_payment-144741883 Как сделать интернет-магазин на Тильда — https://youtu.be/mv7qo5g4MQk Обучение на Tilda — видео урок 1. Как сделать лендинг из стандартных блоков — https://www.youtube.com/watch?v=ybgrYNlf558&feature=youtu.be Обучение на Tilda — видео урок 2. Лендинг в Zero Block на Tilda — https://www.youtube.com/watch?v=_0zKgQMJmBg&feature=youtu.be Обучение на Tilda. Видео-урок 3: Мобильная версия в Zero block — https://youtu.be/aAhf8AVD_H4 Как изменить размер шрифта цены на Tilda: https://www.youtube.com/watch?v=oda3MNvsXUc&t=7s Как сделать мобильное меню гамбургер на Tilda: https://www.youtube.com/watch?v=rd_ellgLHCE&t=4s Как сделать баннер для мобильной версии Tilda: https://www.youtube.com/watch?v=083GYiLWlwU&t=27s Как изменить цвет значка Tilda: https://www.youtube.com/watch?v=eisiAJrjVmI Как на Tilda сделать ссылку: https://www.youtube.com/watch?v=QrET6-a6SQM&t=12s Как добавить виджет ВК на сайт на Tilda: https://www.youtube.com/watch?v=nukgXjWLFiQ Как добавить обновляемый deadline на Tilda: https://www.youtube.com/watch?v=n_en_tJFjc4&t=34s Как зафиксировать меню в Tilda: https://www.youtube.com/watch?v=qmUEv-DSikk&t=1s Как открыть библиотеку блоков на Tilda: https://www.youtube.com/watch?v=FSiSD2mFGkM Как редактировать CSS на Tilda: https://www.youtube.com/watch?v=STpBSDiTIxI&t=5s Как подключить домен к сайту на Tilda: https://www.youtube.com/watch?v=SX5PIWlV6gs&t=1s Как вставить видео на Tilda: https://www.youtube.com/watch?v=RNbtdKi00oc Как скачать сайт на Tilda: https://www.youtube.com/watch?v=94nmFWhwGEI Как сделать pop-up на Tilda: https://www.youtube.com/watch?v=jM81eKE1ADc Как скопировать блок на другую страницу на Tilda: https://www.youtube.com/watch?v=yUHqXNBRhy4 Как удалить сайт на Tilda: https://www.youtube.com/watch?v=OFueoMSatV0 Как убрать значок Tilda (made on Tilda): https://www.youtube.com/watch?v=lgOwoJbebSI Как скопировать страницу на Tilda: https://www.youtube.com/watch?v=thVmwWIWeR8 Как сделать телефон кликабельным на Tilda: https://www.youtube.com/watch?v=bVFXgYkCIlE Как сделать политику конфиденциальности на Tilda: https://www.youtube.com/watch?v=aVgo0bx2iyM Как подключить яндекс карту на Tilda: https://www.youtube.com/watch?v=dc95qAdhc_U Как подключить https на Tilda (ssl сертификат): https://www.youtube.com/watch?v=8a0KT57Zd7M Как сделать градиент кнопки на Tilda: https://www.youtube.com/watch?v=SGUSzKEpKT4 Как сделать меню в zero block на Tilda: https://www.youtube.com/watch?v=GyDzKH6lgIA
Показать больше
Войдите , чтобы оставлять комментарии