Офтоп Ira Smirnova
3 388

Конструктор сайтов Tilda выпустил анимацию по шагам

Инструмент для анимации по шагам появился в Zero Block — редакторе для веб-дизайна, встроенном внутри конструктора. Редактор работает на всех планах, включая бесплатный.

В закладки

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

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

Как это работает

Чтобы на странице появились элементы, которые будут взаимодействовать с пользователем, нужно:

1) Выделить текст, изображение или объект в редакторе Zero Block и открыть пошаговую анимацию в настройках

2) Назначить триггер начала анимации: при скролле, при появлении, при клике или при наведении

3) Добавить новый шаг

4) Изменить свойство: траекторию и скорость движения, размер, прозрачность или угол поворота

Примеры анимации:

Появление и движение элементов по скроллу

Посмотреть в действии http://jungle.step-by-step-demo.tilda.ws/

Анимация при наведении или по клику на объект

Посмотреть в действии http://button.step-by-step-demo.tilda.ws/

Бегущая строка

Посмотреть в действии http://newsticker.step-by-step-demo.tilda.ws/

Больше примеров на странице:
https://tilda.cc/ru/lp/step-by-step-animation/

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Ira Smirnova", "author_type": "self", "tags": [], "comments": 19, "likes": 36, "favorites": 23, "is_advertisement": false, "subsite_label": "flood", "id": 39463, "is_wide": false, "is_ugc": true, "date": "Wed, 06 Jun 2018 14:15:08 +0300" }
{ "id": 39463, "author_id": 50812, "diff_limit": 1000, "urls": {"diff":"\/comments\/39463\/get","add":"\/comments\/39463\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/39463"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791, "possessions": [] }

19 комментариев 19 комм.

Популярные

По порядку

Написать комментарий...
2

Очень круто, что теперь столько возможностей для анимации элементов!

Ответить
1

Неплохо выглядит. Не хватает «Слои» как в Photoshop или списка всех элементов, чтобы можно было выбрать нужный элемент, не меняя его расположение.

Ответить
2

Wow! сайт яндекс станции делали на тильде?

Ответить
0

Панель со слоями (и элементами) появляется по Cmd+L, направляющие Cmd+H / Cmd+Shift+H

Ответить
1

нифига себе что узнаю

Ответить
1

Ребята, это невероятно крутая фича! Спасибо!

Ответить
0

Красиво. Есть вероятность, что это заработает в мобайле?

Ответить
2

Не очень это в мобайле нужно. В мобайле нужно быстро и по делу. Анимацию ждать люди не готовы.

Ответить
0

Там можно сделать с помощью анимации чат, например как тут https://botsify.com/?

Ответить
1

Павел, если вы про иллюстрацию чата, которая на обложке — можно. Чтобы сделать чат как сервис, анимации по шагам недостаточно :(

Ответить
0

Не, именно анимашка интересует. Чат как сервис у нас уже есть
Спасибо, будем изучать

Ответить
0

sexейно)

Ответить
0

Моя любимейшая тильда, ты прекрасна! Это очень круто!

Ответить
0

Спасибо!

Ответить
0

очень сильно не хватает либо функционала, либо уроков (если этот функционал предусмотрен) по парной анимации в Zero Block. Например: мне нужно, чтобы текст увеличился в размере и подчеркивался линией. Мне нужно либо брать уже готовый шаблон, который не всегда подходит под требования, либо выбирать что-то одно из двух. Как я могу сочетать сразу два элемента анимации? И возможно ли это?

Ответить
0

Анимация сейчас кому-то вообще нужна?
Исключения: Промо страницы, сайты визитки и лендинги.

Ответить
0

Вы не поверите, но она даже на мобильных кому-то нужна :-)

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления
{ "page_type": "default" }