Обалденная 3D анимация в Тильде в Зеро Блок по скроллу
Vložit
- čas přidán 27. 08. 2024
- Обалденная 3D анимация в Тильде в Зеро Блок по скроллу
В этом видеоролике мы с вами проболжаем работать с lottie анимацией в тильде, и сегодня я покажу вам, как сделать так, чтобы в зеро блоке ноутбук открывался вместе со скроллом страницы, как на сайте Apple. Вместо ноутбука, естественно, может быть абсолютно любая анимация 3d объекта, или даже видеоролик.
🦜Поддержать автора копейкой: www.donational...
Первая часть lottie анимации в тильде: • Крутая Lottie анимация...
Ссылки:
Код для 3D анимации Зеро Блок Тильда: yadi.sk/d/ibxc...
Инструкция по установке Bodymovin: github.com/air...
Github - gist.github.com/
Сайт-конвертер mp4 в json без bodymovin: observablehq.c...
___________________________________________
✅Поделись видео с друзьями: • Обалденная 3D анимация...
✅Подпишись на канал и поставь🔔: / @design_scripts
Обалденная 3D анимация в Тильде в Зеро Блок по скроллу
___________________________________________
ВК: id11717...
Instagram: / bistricky_stanislav
Email: rootdesign.help@gmail.com
___________________________________________
теги:
#tilda, #тильда, #дизайн, #вебдизайн, #design, #тильдошная, #motilda, #zeroblock, #зероблок, #скрипт, #скриптынатильда, #tildaws, #тильдасайт, #tildazeroblock, #тильдаzeroblock
Было круто знать, как сделать анимацию 3Д обьекта/обьектов не по скроллу а просто что-то плавное, когда находишься на этом блоке.
Дружище, от все души благодарю. В который раз убеждаюсь в том, что Тильда со своими zero block ‘ами это чудо
Увидел случайно, зашёл и тут...
Блин так это ведь то, что ч так давно искал...
Лайк, Подписка +🔔
Спасибо
Большое человеческое спасибо за этот контент! Отдушина среди бесполезных видео и вебинаров, в которых больше продают свою компанию, чем дают информацию.
С твоими видео сделала огромный шаг вперёд в навыке работы с Тильдой
Я рад, что помогаю людям прокачиваться)
Спасибо за приятные слова
@@design_scripts можно попросить совет? Вчера весь день провела за попытками совместить проекты Cinema и Adobe, но так ничего не вышло. Версии CINEMA 4D R14 и Adobe After Effects CS6/Adobe After Effects 2020. Adobe либо не подгружает объекты с расширением .c4d, либо отображает черный экран расширения .aec. В папку с плагинами добавляла файл C4DImporter. Что можно сделать в этой ситуации? Версии программ крякнутые, мб в этом дело.
хотелось бы увидеть видео о том, как добавлять в тильду в zero block скрипты с codepen. Буду благодарен
ещё нет видео?
Ещё нет
@@design_scripts тогда будем ждать)
Ох, как же я ждал второй видос по lottie анимации на тильде. Лайк
ГОСПОДИ!!! ОГРОМНОЕ ТЕБЕ СПАСИБО, ДОБРЫЙ ЧЕЛОВЕК, ЗА ТАКОЙ БЕСПЛАТНЫЙ И МЯСНОЙ КОНТЕНТ!!! ЗА ТАКОЕ МОЖНО БРАТЬ +МЛН ДЕНЕГ ЗА ЗАКАЗ!!! СПАСИБО!!!
Потрясающая информация, спасибо!🤩👏👏👏
Красава, не останавливайся. Обожаю твои видосы по тильде и зеро блокам. Куда кидать донаты?)
Спасибо за коммент. Всё в описании ;)
Я так долго искал эту инфу!!! Спасибо тебе огромное!!!!! Все твои видосы максимально полезные! Не останавливайся))))
Спасибо за такой эмоциональный комментарий)
Ударные инструменты это не только барабаны, но и ксилофон! ))
Видео бомба. Действительно, снимаешь уникальный контент. Видео по такой анимации на тильде я еще не видел
Едрить я думал по проще будет) но я реально сломал голову как это делается, в видосы полная инструкция оказалась👍👍
Привет, супер! Я начинающий веб дизайнер на Тильда и счастлива, что попала на твой канал! Сразу же лайк и подписка!
лучший канал по тильде , на который я натыкалась. Спасибо тебе !!!
Я рад, что тебе понравилось, буду стараться дальше)
Так получилось - ты просто монстр!! У тебя супер полезные видео
Одно дело анимировать по скроллу иллюстрации, а другое дело делать анимацию в зеро блоке 3d объекта. Чего еще я не знала про тильду?)
Слушай, это очень круто!) Спасибо
Просто шикарно. Бро, давай ещё видео по анимации в зеро блоке на Tilda
Наконец-то анимация на тильде, дождались) Инфа суперполезная
Огонь🔥 Спасибо за полезный контент!
Тебе спасибо, что смотришь :D
подписалась. смотрю и буду смотреть. уже два твоих урока применила на сайт. Не останавливайся. Спасибо огромное
Вау! Контент просто пушка! Большое спасибо за Вашу работу, очень помогает!
Станислав, спасибо огромное за канал и за ваши видео! Вы позволили сэкономить мне уйму времени! Спасибо огромное!
Спасибо, приятно это слышать)
Очень большое спасибо, я ради Вас весь интернет перелопатил)
Спасибо! Очень полезные уроки! Подписка и колокольчик прожаты!
Необыкновенно получилось!!!
Как долго я ждал эти видео) Благодарище!
Спасибо за отличные уроки по анимации!
Спасибо - за готовое решешие, думал о подобном не давно
Отличный тутор, спасибо!
Спасибо за коммент, стараюсь :D
Дай Бог тебе здоровья, дружище)
Спасибо, и тебе, друг)
Спасибо за 3d анимацию в тильде в зеро блоке!
Блаблабла много работы мало времени...
Что? Увидел новую фичу, все дела в сторону, сейчас научимся!🙂
Лайк, подписка, колокольчик🤘
нихрена себе блин, это бомба !
Я рад, что тебе понравилось ;)
Потрясающе!
Парень, ты просто нечто! Так держать! *как бы это по-гейски не звучало
Очень круто! Спасибо!
Приятно слышать. Рад, что понравилось)
Как удачно я тебя откапал!!! Ощущение словно отрыл сундук с сокровищами, пхах))
Спасибо огромное! Очень полезно!
Стараюсь)
И тебе спасибо за коммент🌿
Первая часть lottie анимации в тильде: czcams.com/video/yRmj1L7oxF0/video.html
Середина видоса немного залагала. Если кто не понял, куда тыкать - после создания "Secret gist", нужно нажать на кнопку "Raw". Она вот здесь: i.imgur.com/ZxHGSBM.png
Ссылки:
Код для 3D анимации Зеро Блок Тильда: yadi.sk/d/ibxcdrclAqxu3w
Инструкция по установке Bodymovin: github.com/airbnb/lottie-web
а что потом? нажав на кнопку на кнопку "Raw" получаем большой и длинный код, как его перевести в код по аналогии с lottie-1?
ты бы закрепил этот комент, уже думал ты не скинул код
Красава, чувак! Очень полезное видео
Я аж засмущался. Тебе спасибо за просмотр и коммент. Рад, что было полезно ;)
Реально крутое видео, побольше подобных видео делай
Благодарю, постараюсь)
Теперь, когда я вижу что-нибудь крутое, первым делом думаю не о том, как это применить у себя на сайте, а о том, как об этом рассказать на ютубе ;)
Хе, я только пару месяцев назад слямзил ноут с сайта Эпла. Тот самый, с той самой анимацией. Скриншотил каждое положение его, а потом фотошопом редактировал. Потом в Зеро блоке эти фотки ставил и запилил анимацию при скролле. Вышло один в один как у Эпла😀 И вот сегодня увидел твой видос - еще один вариант как это можно делать. Очень интересно👍
красава, от души!!!
Круть! Спасибо!
И тебе спасибо)
Красавчик!)
Шикарно! Продолжай)))
Спасибо, приятно слышать ;)
Кайф. Спасибо!
Спасибо, что смотришь и комментируешь. Кайф)
Ты крут спасибо)
Спасибо за коммент, стараюсь)
А каким образом можно сделать задержку для исполнения джейсон анимации если она привязана к % от прокрутки страницы? нужно чтобы сначала объект например подъехал на первом кадре в статике, остановился по центру экрана и только после этого начать его анимацию?
А как сделать так, чтобы анимация по скроллу повторялась, а не останавливалась на последнем кадре?
Огонь.
Хакер ),спасибо.
Отличное видео! Тоже ждал еще с первой части. Спасибо! Осталось не полениться, повторить). Кстати, есть вариант что такие кастомные плюхи могут в один момент слететь у клиента из-за очередного обновления тилды? Все пугают что лучше не применять сторонний код для клиентов.
Спасибо за комментарий)
Про возможность слететь - не слышал такого. Это же обычные css, js, jquery.
Думаю, оно слетит, только если там на тильде специально сильно накосячат с добавлением кода из T123 к основному коду сайта, и то не факт ¯\_(ツ)_/¯
Жрёт конечно много анимация )) -30 для полной версии, а так классно )
Спасибо большое!!! Обалденный делаешь материал с хорошо поставленным голосом, но почему не публикуешь новые видео?
Огонь :)
Стараюсь)
Здорово)) как же круто))) но для меня это пока темный лес) у Вас заняло 11 минут, у меня часа два займет наверное😂 но круто конечно) а если не Леново, а свой продукт нужно так сделать, не получится отфотать частыми кадрами и как-то соединить? Чтобы так же по скроллу получилось?
Респект за морровинд
У меня у одного при добавлении второго объекта анимации, первый пропадает?
Ты просто космос, Стас! Аххах)) респект за такой уникальный и редкий контент. Действительно, информацию про анимацию объектов по скроллу, особо нигде не смог найти. Тем более такой доступной информации, которая понятна человеку, не разбирающемуся в джава скриптах.
У меня вопрос.. как добавить в джава скрипт несколько контейнеров lotti-1, lotti-2, lotti-3 и так далее. Если дублировать блок с кодом и менять в нем lotti-1 на lotti-2, то один из скриптов в итоге не работает. У меня два зеро блока на одной странице, в которых я хочу запустить анимацию. Заранее спасибо!
Спасибо за такой развёрнутый комментарий)
Напиши в вк, я тебе отправлю готовый код
смогли решить эту проблему? то же самое сейчас пытаюсь сделать.. все перепробовал и в одном блоке html и разными, либо не играет анимация либо вообще пропадают джейсон контейнеры
спасибо за видео :) кто сталкивался: я повторила скрипт в blank page, но когда все проделываю на полноценном сайте, то скролл не работает - все застывает. кто знает в чем проблема? спасибо
Привет. Сделали все как у тебя по видео. все получилось. Спасибо! НО... ) на маках сафари анимация прыгает как бы дергается и мерцает. Не сталкивались ли с подобным? Если да, то подскажите возможные решения работы json с яблоком.
Анимация со светом бы пригодилась, т.к незнаком прием. Хотя бы в подсказку воткнуть урок по свету
Большое спасибо за видео! Подскажите, а как 2 разные анимации по скроллу вставить на одну страницу? Я пробовал код продублировать для второй анимации, но всё ломается...
А как изменить код, если хочу чтобы анимация начиналась с другого блока? Например в середине сайта, также по скроллу
Точно такая же проблема... случайно, не удалось решить её?
@@alexgoryainov5267 Удалось как-то решить?
Добрый день, подскажите как можно установить старт триггер для этой анимации, чтобы она начала проигрываться когда выедет на середину экрана? Сейчас она начинает проигрываться сразу как только верх блока касается экрана, то есть элемент еще не выехал, но уже прокрутился
\Пушка!\
Ты крутой)
Ты тоже)
А для Shopify есть что-то подобное? Или подскажите где можно найти. Спасибо
Здравствуйте, огромное спасибо за урок! Скажите пожалуйста почему у меня анимация по итогу на тильде получается на бледном сером фоне и как от него избавиться?
Привет, очень круто. Я такого не видел прям в шоке. А можно ли это сделать для мобильной устройства?
То, что я показываю в данном видео, прекрасно работает на мобильных устройствах
Скажите, чтобы поменять время старт анимации, надо менять что-то в коде? У меня анимация располагается намного ниже верха страницы и к тому моменту когда я до неё долистываю, она уже проиграна до последнего кадра
Очень крутое видео вышло! Спасибо!
Обязательно разбивать анимацию на много PNG-шек? С чем это связано?
Это связано с особенностью работы. Как я понимаю, только последовательность изображений мы можем запихнуть в json файл. По итогу, у нас выходит "слайдшоу", проигрываемое с помощью скролла
@@design_scripts Хмм.. Это немного странно. Я создавал в AE небольшие анимации, типа загрузки, и выгружал их через bodymovin в json. Проверял на сайте Lottie в их конструкторе и все хорошо работало. Единственное, не пробовал еще интегрировать html код с файлом json, который предлагает Lottie, в Тильду
Так или иначе, спасибо, что ответил
@@nicolasjey9597 Фишка с PNGшками честно сворована с официального курса по webflow. Я только сейчас допёр, о чём ты)
Честно, даже не додумался прогнать через плагин сразу видео или анимацию, не разбивая на на кучу картинок. Может оказаться, что это актуально лишь для 3D или видеороликов. В любом случае, первая часть - лишь подготовка к основной второй, я показываю и закрепляю в голове алгоритм.
Завтра обязательно попробую выгрузить цельную 3d анимацию, не разбивая на картинки :)
@@design_scripts Если не трудно, поделись результатом, что в итоге получилось
красава
Привет, сделай точно такой же обзор на такую анимацию в вордпресс elementor.
Топовый контент! А как сделать так, чтобы анимация начиналась не с верха страницы, а с того места, где располагается анимируемый блок? Спасибо)
Мне тоже интересно. Ты уже узнал как? Если разместить на анимацию на 2 экране, то когда доскроллишь до 2 экрана, анимация уже закончится. Нашел на одном лендинге тильды то, как это реализовано, только не знаю код. Этот лендинг можно найти погуглив " Tilda bodymovin"
Очень полезный крутой урок, спасибо большое. лайк подписка. ) Единственное, что фрустрирует, так это то, что синема денег стоит, а кряки должным образом не работают. Есть возможность ведь создать анимацию и зарендерить ее в блендере например? Или, может, посоветуешь какое-нибудь доступное хорошее приложение на твой взгляд? буду благодарна.
Спасибо за видео! Хотелось бы узнать можно ли таким образом создавать несколько лотти анимаций на одном сайте?
Если напишешь в вк, скину код для нескольких анимаций
Когда в проекте делаю два нулевых блока и в каждом по разной анимации привязанных к двум html-блокам с кодом, они почему-то ломаются и не работают. В чем проблема может быть? Может можно как-то в один блок с кодом все засунуть?
Всё дело в конфликте между одинаковыми переменными. Поменяй названия переменных у второго зеро блока.
Если не получится - пиши в соц. сети ;)
Пушка
Спасибо🔥
@@design_scripts рили оч годный и уникальный контент, как раз с тильдой сейчас работаю)
Привет. Круто творишь. Как сделать бота на тильду? )
Как же это сложно )
Не получается вставить больше оджной лотти анимации на странцие. Это норма?
а как добавить 2 и более анимации в блоке?
Привет! Скажи пожалуйста, если я использую блендер, как мне сохранять JSON блокнот?
Как я понимаю, в Blender схема такая же 😊😊
Очень ждал, спасибо. А каталог товаров можно так сделать ? Как у М видео
Глянул, что там у мвидео. Да, у них тоже анимация из простого набора картинок. Уверен, это можно повторить. Возможно, как-нибудь сам разберу и запишу видео
Спасибо за ответ ) Ждём
Это анимация на мобильных версиях будет отображаться?
А можно будет вместо cinema 4d использовать блендер?
А у меня вот вопрос. Получится ли в афтер эффекте сделать так же не с кадрами а с самой анимацией? то есть, если я сделаю анимацию в премьере и ее же сохраню через этот плагин, то же самое получится???
Ахуенно полезный видос. Спасибо!
Добрый день. Отписал на почту по поводу сотрудничества.
Крутые видеоролики. В прошлом видео ты показывал сайт apple с AirPods, там была анимация видео по скроллу. Чтобы сделать такое в тильде, нужно сразу рендерить видео в картинки через афтер эффектс?
Всё верно. Пропускаешь полностью шаг с cinema4d и рендеришь видеоролик в формате набора изображений png. А дальше всё точно так же.
Спасибо за комментарий
@@design_scripts Что делать если при рендере в бадимувин сам рендер завис на 100%? Всё сделала по инструкции, рендер прошёл до 100% и окно не сменилось как у тебя и файл в папке не появился. Можешь подсказать в чём причина?
Render Failed
логов нету, не работает плагин
Роскошный урок, большое спасибо!
Но есть вопрос: а как удалось экспортировать png с альфа-каналом (1280х720) с таким малым весом? И что еще важнее - как удалось ужать 21.7 мб (которые весит 91 изображение) в 5-мб json-файла?
*у меня даже пожатый jpeg весит больше, а уж если секвенцию, которая весит 5мб загнать в json-файл (с компрессией 80) - то он и вовсе начинает все 11 мб весить
Мне тоже интересно. Не нашли решение?
@@holiholo6727 Боюсь, что нет. Но я пробежался по эппловскому сайту и обнаружил, что там тоже весьма увесистые секвенции, сопоставимые с тем, что экспортируется у меня.
Лайк поставил! час просидел но так и не понял в чем проблема и почему не завелось / тестил в сафари/ хроме/ Яндекс / вообще ничего не отображается
4 раза пытался вставить код в гитхаб, 4 раза браузер умер
Привет, только начинаю работать на тильде, хотел бы узнать как правильно и аккуратно выравнивать элементы в рабочей зоне. ( Горячие клавиши может какие то, либо еще что. Изначально на зеро блоке есть вот эта вертикальная сетка и когда я пытаюсь выровнить какой либо элемент, то он постоянно смещается на несколько пикселей в лево или право). Надеюсь понятно объяснил и буду рад обратной связи! =)
Спасибо за урок. Не подскажешь как можно добавить вторую анимацию на сайт?
Напиши, пожалуйста, где-нибудь в соц.сети - отправлю код