Пошаговая анимация в Tilda Publishing
HTML-код
- Опубликовано: 3 окт 2024
- Видеообзор новой функции конструктора сайтов Tilda Publishing.
tilda.cc/ru/lp...
Пошаговая анимация - это создание сценариев движения элементов на странице. Текст, картинки, объекты могут по скроллу, по клику или при наведении менять положение, двигаться по траектории, менять размер, прозрачность и угол поворота.
Инструмент для анимации по шагам появился в Zero Block - редакторе для веб-дизайна, встроенном внутри конструктора. Редактор работает на всех планах, включая бесплатный.
Страница с демонстрацией возможностей:
tilda.cc/ru/lp...
Тильда чемпион. 2 месяца как разрабатываю коммерческие сайты на тильде и постоянно вижу новые введения и обновления. Спасибо за прекрасный конструктор! Ещё бы хотелось видеть разного рода расширения для Интернет-магазинов. Тогда конструктор будет почти универсален.
Это же просто праздник какой-то!!!)))
Hxbzhdbd
Ребята из Тильды, вы огонь! Браво
Спасибо, это очень оживило мой сайт!
Большое спасибо за видео! Недавно начала осваивать Тильду. Интуитивный интерфейс - 100% о вас. Я видела сайты с подобной анимацией, и диву давалась - как же ее сделать? А оказывается, все так легко! После просмотра аж руки зачесались, пойду пробовать. Вы крутые
Никита так просто и понятно объясняет. Я новичок в Тильде и сразу всё понял.
Ма-ла-дцы!
Вот этого реально не хватало по сравнению с Редимагом. Теперь на уровне. Еще раз: МАЛАДЦЫ!
Супер, большое спасибо за видео.!!!!
Молодцы ребята с Тильды, душа радуется вашей платформе)
Оч круто, но было бы еще круче, если бы вы сделали такие же, различные варианты, уже собранные, как при выборе блоков. То есть чтобы можно было туда вписать текст, картинки, любой контент, и он уже по готовому работал :) Так то да, можно квадраты заставить по странице летать, но к чему это привязать, я не пойму пока :)
Tilda стала на уровень выше!
Если наш русский продукт, то почему не руссифицирована.?
Суперский апгрэйд!) будем практиковаться, спасибо!!)
Большое спасибо , очень полезное видео ! ! !
спасибо! увидев анимацию, сразу перенесли сайт к вам))
Отлично!Спасибо!
Сайт просто чудесно выглядит)
Блин, только недавно увидел этот проект. Это просто супер, буду фигачить сайты.)
Супер круто !
Это очень крутая штука! Правда интересен вариант с мобильной версией))
Никита, Вы стопроцентный миллионер. Купите пожалуйста микрофон для улучшения качества роликов! Вы и Ваш сервис великолепны, но плохой звук портит безупречное качество!
вау офигенные эффекты
Круто)) Спасибо Вам за эту прекрасную возможность))))))))!!!!!!!!
Потрясная функция!! Не терпится попробовать
очень круто! спасибо за вашу работу!
Выглядит очень круто!!
Было бы неплохо, если бы можно было анимации еще и комбинировать. Например мне надо,что бы объект появлялся при по скролле, потом покачивался в блоке On screen и потом при дальнейшем скроле исчезал
Молодцы, вы -крутые!!
Выглядит очень круто 😃
Спасибо за тильду
Тильда это гениально
Спасибо, очень полезное видео!
Но со звуком у вас явные проблемы)
кстати сейчас анимация в мобильных версиях работает. просто надо перейти на вид экрана - планшет и в разделе анимация нажать на "Swinch on" и будет счастье. Вот буквально вчера сообщили. Уже опробовал. Все работает
Класс, очень полезное видео)) Спасибо 💖
Только появление из прозрачности все равно не работает корректно, так как первы кадр быстро проявляется сам объект...
точно
@@Алия-о5й вы не нашли как это исправить? )
А как применить на мобильных устройствах?
1) Зайти в ZeroBlok
2) Редактировать блок
3) Перейти на мобильную версию.
4) В Settings выделить блок где хотим включить анимацию и найти вкладку Mobile Animation ( находиться снизу)
5) Нажать SWITCH ON.
6) SAVE и CLOSE
Прелестно
Спасибо! Топ!
Такой вопрос: Сделал анимацию где часть блоков спускается сверху в центр экрана, а часть блоков наоборот, снизу в центр. При нажатии на плей при редактировании - все работает. Но когда публикую страницу, те блоки которые должны идти снизу в центр вообще не показывает, что только не пробовал. Может быть подскажете?😞😞😞
Здравствуйте
Затрудняемся помочь в рамках комментариев на RUclips.
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
В обращении подробно опишите задачу/ проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять задачу/ проблему и дать максимально точный ответ.
Анимация возможна только в отношении одного элементов элемента? Скажите пожалуйста!
Добрый день! Анимацию можно создать для нескольких элементов.
Спасибо!
Это очень круто! Спасибо!
Но скажу не только про анимацию. Стал делать письма для рассылки, и не хватает модулей, сильно, сделайте нулевой блок что ли, или добавьте пожалуйста ещё блоков для писем, в частности шапка. Спасибо!
Данил, блоки для писем намеренно сделаны такими лаконичными, так как почтовые программы ведут себя непредсказуемо. И чтобы письмо точно выглядело хорошо и могло быть прочитано, мы используем минимальное оформление.
Подскажите в мобильной версии это не работает?
Тильда - бомба! Скажите пожалуйста, как же анимацию для других разрешений настроить, а то пока только в максимальном разрешении можно анимацию делать?
;) спасибо.
да, анимация только в десктопной версии: для мобильных анимация избыточна и ухудшает пользовательский опыт
Tilda Publishing Russia Даже базовая будет ухудшать UX?
да, для мобильных лучше позаботиться о том, чтобы телефон был кликабельным (при нажатии можно было сразу позвонить), чтобы шрифт был достаточно крупным и хорошо читался, чтобы была понятной навигация, а картинки не были тяжелыми и сайт быстро загружался
Спасибо, Вашу позицию понял. По поводу не кликабельных телефонов в мобильной версии - за такое вообще расстреливать надо! :)
Ну не так жестко, конечно, но определенно стоит об этом не забывать :-)
круто
Было бы классно если можно было бы накладывать страницу на zero block. Чтобы они как бы слоями были.
Если я вас правильно поняла, то это возможно. Посмотрите, пожалуйста, например, в этой статье tilda.education/articles-design-thinking-great-questions некоторые элементы из Zero Block накладываются на стандартные блоки. Если это то, что нужно, напишите, пожалуйста, в поддержку, ребята подскажут, как это сделать
есть какие-либо советы по редактированию страницы с телефона? Подскажите пожалуста
Добрый день! Мы рекомендуем для настройки анимации использовать компьютер.
А можно ли как-нибудь посмотреть на сайт, который показали в начале?
Здравствуйте! Ссылка есть в описании под видео.
tilda.cc/ru/lp/step-by-step-animation/
@@TildaPublishing Огромное спасибо) Еще вопрос, можно ли найти данный сайт у вас а качестве шаблона посредством поиска через ID? Недавно перешла на Тильду и хочется в конкретно примере пощупать все фишки с анимацией)
белллииссииимооо!!
А можно это использовать в выпадающем мобильном меню?
К сожалению, готового решения для использования пошаговой анимации в блоках из библиотеки нет. Видео касается только Zero Block.
тэээкс, куда душу сдавать чтоб так научиться?
Как по горизонту выровнять контент, есть ли сетка какая, линия для горизонта?
Здравствуйте. В представленной в начале странице фиксированный элемент "Good vibes only" не работает как показано в видео. И пытаюсь в своем сайте сделать такую фичу, тоже не выходит.
Здравствуйте!
Напишите, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту team@tilda.cc
В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу вашего сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
Теперь во фри плане нет кнопок loop и test в продвинутой анимации? хотела попробовать, но её даже нельзя проиграть, как базовую
Сейчас дополнительно перепроверили, нет. На Free есть возможность воспроизводить и зацикливать анимацию по-прежнему
Если у вас возникли трудности, создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написав на почту support@tilda.cc
В обращении подробно опишите проблему, укажите ссылку на опубликованную страницу вашего сайта и прикрепите полноэкранные скриншоты, которые помогут увидеть проблему и максимально оперативно помочь
Привет.
А как открыть дополнительно страничку для предпросмотра? У меня есть возможность просмотреть только путем "Опубликовать" после каждого сохранения..
Здравствуйте! Посмотрите, пожалуйста, эту инструкцию - answers.tilda.cc/ru/a/mobile/
Как сделать чтобы при наведении текст был другим цветом? Допустим
из черного в синий
Всё классно в зеро боке но, не хватает знание английского. Хотелось бы перевод на русском)
скажите, а анимация в мобильной версии не доступна? мне по скролу анимация нужна..
👍
не понимаю, как добавить это в проект, в статью
а можно к примеру сделать, чтобы на одном проекте было несколько ID шаблонов анимаций а не одна(К примеру: Параллакс эффект к движ миши и появления изображения при наведении на текст)? И как это сделать?
Здравствуйте, Владислав
К сожалению, не уверены, что правильно вас понимаем.
Вы могли бы описать чуть подробнее?
Чтобы мы смогли дать более точный ответ, отправьте, пожалуйста, подробное описание вопроса, ссылку на опубликованную страницу вашего сайта на team@tilda.cc или через виджет в правом нижнем углу в личном кабинете Tilda.
С Уважением,
Tilda Team
Как увеличить размер в пикселях. Нужно кнопку с 3px до 193px в 3500% увеличивать. Такое себе удовольстве.
Также анимация увеличения идет от центра. А как поставить, чтобы шла слева?
Здравствуйте, Даниил
Не уверены, что правильно вас пониманием
Увеличение работает только из середины, вы могли бы отправить ссылку на референс - увеличение не из центра?
Задать можно только в процентах действительно, вы можете установить для параметра scale в пошаговой анимации нужное вам значение в процентах
С Уважением,
Tilda Team
как вставить анимированный логотип, чтобы он занимал не более 5% в блоке и находился с краю блока?
Здравствуйте! К сожалению, мы не можем вам подсказать точные настройки анимации. Вы можете создать свою анимацию, используя учебник - tilda.education/web-animation-course
Почему при анимации из прозрачности, элемент когда обновишь страницу сначала мигнёт а потом уже уйдёт в прозрачность?
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
В обращении опишите проблему, укажите ссылку на опубликованную страницу сайта и прикрепите полноэкранные скриншоты, которые помогут понять проблему и дать максимально точный ответ.
Добавьте пожалуйста возможность перемещать работу с фигмы в Тильда - как на Framer
Спасибо за предложение
Обязательно учтём его при планировании будущих обновлений
Как сделать из формы изогнутую линию?
Не уверены, что правильно понимаем задачу
Создайте, пожалуйста, обращение в нашу службу поддержки. Это можно сделать на странице tilda.cc/tickets или написать на почту support@tilda.cc
В обращении подробно опишите задачу, прикрепите полноэкранные скриншоты, которые помогут понять задачу и дать максимально точный ответ.
Меня одного интересует то, что как это работает со стороны кода...
То есть больше не нужны веб программисты?
А как же с гугл аналитик и это тоже работает?
Стоит исходить из целей и задач всё-таки, однозначного ответа нет, к сожалению
@@TildaPublishing а если я соберу сайт сначала в фигме а потом перенесу его в Тильда, он будет работать как любой другой сайт с помощью программиста
Да, всё верно
Вы можете:
- Использовать готовые блоки из библиотеки Тильды
- Создавать собственные в zero-block (встроенный графический редактор в Тильде)
- Создавать блоки с помощью стороннего кода, добавляя его в блок t123 из категории «другое»
Пожелание человеку за кадром: говорите пожалуйста по чётче, в некоторых моментах тяжело разобрать речь, тихо и невнятно. Тем более материал новый, важно каждое слово.
Спасибо за обратную связь, будем внимательнее подходить к звуку
Скажите, пожалуйста, на мобильных устройствах будет ли проблема с загружаемостью анимации?
Подскажите пожалуйста как сделать умирающий текст в тильде.может есть такой урок?
Не уверены, что правильно вас понимаем.
Вы могли бы, пожалуйста, прислать ссылку на страницу с примером или описать вашу идею подробнее?
@@TildaPublishing я имела ввиду мигающий
@@TildaPublishing я скину вам ссылку чуть позже
@@TildaPublishing thisisprojekt.com/?ref=tilda.cc/ru/madeontilda/
@@TildaPublishing пожалуйста скажите как сделать такой текст?
Фигма в 100 раз круче
Есть у кого-нибудь примеры реально круто собранных страниц с этим блоком?
ship.step-by-step-demo.tilda.ws/
solar-system.step-by-step-demo.tilda.ws/
wild.step-by-step-demo.tilda.ws/
background.step-by-step-demo.tilda.ws/
texttwist.step-by-step-demo.tilda.ws/
swinton.step-by-step-demo.tilda.ws/
transparency.step-by-step-demo.tilda.ws/
text.step-by-step-demo.tilda.ws/
pingpong.step-by-step-demo.tilda.ws/
fly.step-by-step-demo.tilda.ws/
shapes.step-by-step-demo.tilda.ws/
Страницы можно использовать как темплейты - то есть создать в своем аккаунте и посмотреть настройки
На счет темплейтов- круто!))) По-больше бы их!
время 0:49
Вы основатель такой крутой платформы, а микрофон у вас поршивый :(
Нашёл следующие баги:
1. Невозможно настроить стартовый шаг в соответствии с инструкцией. То есть из невидимого состояния в видимое. Где-то вы наговнокодили.
2. Кроме того, последний шаг нельзя зафиксировать (хотя кнопка есть).
3. Выравнивание двух объектов относительно друг друга тоже не работает. Всё криво и косо.
В общем, пока продукт сырой.
Кто сделает мне такую анимацию за деньги ?
Я могу.
Сделайте все на русском языке