Обалденная 3D анимация в Тильде в Зеро Блок по скроллу
ฝัง
- เผยแพร่เมื่อ 20 ส.ค. 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 ‘ами это чудо
хотелось бы увидеть видео о том, как добавлять в тильду в zero block скрипты с codepen. Буду благодарен
ещё нет видео?
Ещё нет
@@design_scripts тогда будем ждать)
Большое человеческое спасибо за этот контент! Отдушина среди бесполезных видео и вебинаров, в которых больше продают свою компанию, чем дают информацию.
С твоими видео сделала огромный шаг вперёд в навыке работы с Тильдой
Я рад, что помогаю людям прокачиваться)
Спасибо за приятные слова
@@design_scripts можно попросить совет? Вчера весь день провела за попытками совместить проекты Cinema и Adobe, но так ничего не вышло. Версии CINEMA 4D R14 и Adobe After Effects CS6/Adobe After Effects 2020. Adobe либо не подгружает объекты с расширением .c4d, либо отображает черный экран расширения .aec. В папку с плагинами добавляла файл C4DImporter. Что можно сделать в этой ситуации? Версии программ крякнутые, мб в этом дело.
Ох, как же я ждал второй видос по lottie анимации на тильде. Лайк
ГОСПОДИ!!! ОГРОМНОЕ ТЕБЕ СПАСИБО, ДОБРЫЙ ЧЕЛОВЕК, ЗА ТАКОЙ БЕСПЛАТНЫЙ И МЯСНОЙ КОНТЕНТ!!! ЗА ТАКОЕ МОЖНО БРАТЬ +МЛН ДЕНЕГ ЗА ЗАКАЗ!!! СПАСИБО!!!
Красава, не останавливайся. Обожаю твои видосы по тильде и зеро блокам. Куда кидать донаты?)
Спасибо за коммент. Всё в описании ;)
Я так долго искал эту инфу!!! Спасибо тебе огромное!!!!! Все твои видосы максимально полезные! Не останавливайся))))
Спасибо за такой эмоциональный комментарий)
Видео бомба. Действительно, снимаешь уникальный контент. Видео по такой анимации на тильде я еще не видел
Едрить я думал по проще будет) но я реально сломал голову как это делается, в видосы полная инструкция оказалась👍👍
Ударные инструменты это не только барабаны, но и ксилофон! ))
Одно дело анимировать по скроллу иллюстрации, а другое дело делать анимацию в зеро блоке 3d объекта. Чего еще я не знала про тильду?)
Привет, супер! Я начинающий веб дизайнер на Тильда и счастлива, что попала на твой канал! Сразу же лайк и подписка!
Слушай, это очень круто!) Спасибо
лучший канал по тильде , на который я натыкалась. Спасибо тебе !!!
Я рад, что тебе понравилось, буду стараться дальше)
Наконец-то анимация на тильде, дождались) Инфа суперполезная
Просто шикарно. Бро, давай ещё видео по анимации в зеро блоке на Tilda
Так получилось - ты просто монстр!! У тебя супер полезные видео
Очень большое спасибо, я ради Вас весь интернет перелопатил)
Огонь🔥 Спасибо за полезный контент!
Тебе спасибо, что смотришь :D
Первая часть lottie анимации в тильде: th-cam.com/video/yRmj1L7oxF0/w-d-xo.html
Середина видоса немного залагала. Если кто не понял, куда тыкать - после создания "Secret gist", нужно нажать на кнопку "Raw". Она вот здесь: i.imgur.com/ZxHGSBM.png
Ссылки:
Код для 3D анимации Зеро Блок Тильда: yadi.sk/d/ibxcdrclAqxu3w
Инструкция по установке Bodymovin: github.com/airbnb/lottie-web
а что потом? нажав на кнопку на кнопку "Raw" получаем большой и длинный код, как его перевести в код по аналогии с lottie-1?
ты бы закрепил этот комент, уже думал ты не скинул код
подписалась. смотрю и буду смотреть. уже два твоих урока применила на сайт. Не останавливайся. Спасибо огромное
Станислав, спасибо огромное за канал и за ваши видео! Вы позволили сэкономить мне уйму времени! Спасибо огромное!
Спасибо, приятно это слышать)
Блаблабла много работы мало времени...
Что? Увидел новую фичу, все дела в сторону, сейчас научимся!🙂
Лайк, подписка, колокольчик🤘
Вау! Контент просто пушка! Большое спасибо за Вашу работу, очень помогает!
Парень, ты просто нечто! Так держать! *как бы это по-гейски не звучало
Необыкновенно получилось!!!
Потрясающе!
Как удачно я тебя откапал!!! Ощущение словно отрыл сундук с сокровищами, пхах))
Дай Бог тебе здоровья, дружище)
Спасибо, и тебе, друг)
нихрена себе блин, это бомба !
Я рад, что тебе понравилось ;)
Как долго я ждал эти видео) Благодарище!
Спасибо - за готовое решешие, думал о подобном не давно
Спасибо! Очень полезные уроки! Подписка и колокольчик прожаты!
Отличный тутор, спасибо!
Спасибо за коммент, стараюсь :D
Спасибо за отличные уроки по анимации!
Хе, я только пару месяцев назад слямзил ноут с сайта Эпла. Тот самый, с той самой анимацией. Скриншотил каждое положение его, а потом фотошопом редактировал. Потом в Зеро блоке эти фотки ставил и запилил анимацию при скролле. Вышло один в один как у Эпла😀 И вот сегодня увидел твой видос - еще один вариант как это можно делать. Очень интересно👍
Спасибо за 3d анимацию в тильде в зеро блоке!
Очень круто! Спасибо!
Приятно слышать. Рад, что понравилось)
Красавчик!)
А как сделать так, чтобы анимация по скроллу повторялась, а не останавливалась на последнем кадре?
Спасибо огромное! Очень полезно!
Стараюсь)
И тебе спасибо за коммент🌿
Шикарно! Продолжай)))
Спасибо, приятно слышать ;)
Красава, чувак! Очень полезное видео
Я аж засмущался. Тебе спасибо за просмотр и коммент. Рад, что было полезно ;)
Круть! Спасибо!
И тебе спасибо)
Реально крутое видео, побольше подобных видео делай
Благодарю, постараюсь)
Теперь, когда я вижу что-нибудь крутое, первым делом думаю не о том, как это применить у себя на сайте, а о том, как об этом рассказать на ютубе ;)
Кайф. Спасибо!
Спасибо, что смотришь и комментируешь. Кайф)
А каким образом можно сделать задержку для исполнения джейсон анимации если она привязана к % от прокрутки страницы? нужно чтобы сначала объект например подъехал на первом кадре в статике, остановился по центру экрана и только после этого начать его анимацию?
У меня у одного при добавлении второго объекта анимации, первый пропадает?
красава, от души!!!
Огонь.
Спасибо большое!!! Обалденный делаешь материал с хорошо поставленным голосом, но почему не публикуешь новые видео?
спасибо за видео :) кто сталкивался: я повторила скрипт в blank page, но когда все проделываю на полноценном сайте, то скролл не работает - все застывает. кто знает в чем проблема? спасибо
Ты крут спасибо)
Спасибо за коммент, стараюсь)
Хакер ),спасибо.
Отличное видео! Тоже ждал еще с первой части. Спасибо! Осталось не полениться, повторить). Кстати, есть вариант что такие кастомные плюхи могут в один момент слететь у клиента из-за очередного обновления тилды? Все пугают что лучше не применять сторонний код для клиентов.
Спасибо за комментарий)
Про возможность слететь - не слышал такого. Это же обычные css, js, jquery.
Думаю, оно слетит, только если там на тильде специально сильно накосячат с добавлением кода из T123 к основному коду сайта, и то не факт ¯\_(ツ)_/¯
Огонь :)
Стараюсь)
Жрёт конечно много анимация )) -30 для полной версии, а так классно )
Добрый день, подскажите как можно установить старт триггер для этой анимации, чтобы она начала проигрываться когда выедет на середину экрана? Сейчас она начинает проигрываться сразу как только верх блока касается экрана, то есть элемент еще не выехал, но уже прокрутился
Анимация со светом бы пригодилась, т.к незнаком прием. Хотя бы в подсказку воткнуть урок по свету
А как изменить код, если хочу чтобы анимация начиналась с другого блока? Например в середине сайта, также по скроллу
Точно такая же проблема... случайно, не удалось решить её?
@@alexgoryainov5267 Удалось как-то решить?
Здорово)) как же круто))) но для меня это пока темный лес) у Вас заняло 11 минут, у меня часа два займет наверное😂 но круто конечно) а если не Леново, а свой продукт нужно так сделать, не получится отфотать частыми кадрами и как-то соединить? Чтобы так же по скроллу получилось?
Здравствуйте, огромное спасибо за урок! Скажите пожалуйста почему у меня анимация по итогу на тильде получается на бледном сером фоне и как от него избавиться?
А для Shopify есть что-то подобное? Или подскажите где можно найти. Спасибо
Большое спасибо за видео! Подскажите, а как 2 разные анимации по скроллу вставить на одну страницу? Я пробовал код продублировать для второй анимации, но всё ломается...
Привет. Сделали все как у тебя по видео. все получилось. Спасибо! НО... ) на маках сафари анимация прыгает как бы дергается и мерцает. Не сталкивались ли с подобным? Если да, то подскажите возможные решения работы json с яблоком.
Ты просто космос, Стас! Аххах)) респект за такой уникальный и редкий контент. Действительно, информацию про анимацию объектов по скроллу, особо нигде не смог найти. Тем более такой доступной информации, которая понятна человеку, не разбирающемуся в джава скриптах.
У меня вопрос.. как добавить в джава скрипт несколько контейнеров lotti-1, lotti-2, lotti-3 и так далее. Если дублировать блок с кодом и менять в нем lotti-1 на lotti-2, то один из скриптов в итоге не работает. У меня два зеро блока на одной странице, в которых я хочу запустить анимацию. Заранее спасибо!
Спасибо за такой развёрнутый комментарий)
Напиши в вк, я тебе отправлю готовый код
смогли решить эту проблему? то же самое сейчас пытаюсь сделать.. все перепробовал и в одном блоке html и разными, либо не играет анимация либо вообще пропадают джейсон контейнеры
Скажите, чтобы поменять время старт анимации, надо менять что-то в коде? У меня анимация располагается намного ниже верха страницы и к тому моменту когда я до неё долистываю, она уже проиграна до последнего кадра
Не получается вставить больше оджной лотти анимации на странцие. Это норма?
Ты крутой)
Ты тоже)
Привет, сделай точно такой же обзор на такую анимацию в вордпресс elementor.
а как добавить 2 и более анимации в блоке?
Render Failed
логов нету, не работает плагин
Когда в проекте делаю два нулевых блока и в каждом по разной анимации привязанных к двум html-блокам с кодом, они почему-то ломаются и не работают. В чем проблема может быть? Может можно как-то в один блок с кодом все засунуть?
Всё дело в конфликте между одинаковыми переменными. Поменяй названия переменных у второго зеро блока.
Если не получится - пиши в соц. сети ;)
Привет! Скажи пожалуйста, если я использую блендер, как мне сохранять JSON блокнот?
Респект за морровинд
У меня почему то модели без текстур выгружаются, что с хэтим делать, подскажите пожалуйста люди добрые
Топовый контент! А как сделать так, чтобы анимация начиналась не с верха страницы, а с того места, где располагается анимируемый блок? Спасибо)
Мне тоже интересно. Ты уже узнал как? Если разместить на анимацию на 2 экране, то когда доскроллишь до 2 экрана, анимация уже закончится. Нашел на одном лендинге тильды то, как это реализовано, только не знаю код. Этот лендинг можно найти погуглив " Tilda bodymovin"
\Пушка!\
Почему у меня при добавлении кода перекрываются другие блоки с анимацией? и не показываются
Как я понимаю, в Blender схема такая же 😊😊
Спасибо за видео! Хотелось бы узнать можно ли таким образом создавать несколько лотти анимаций на одном сайте?
Если напишешь в вк, скину код для нескольких анимаций
Лайк поставил! час просидел но так и не понял в чем проблема и почему не завелось / тестил в сафари/ хроме/ Яндекс / вообще ничего не отображается
Не подскажите, а как сделать тоже самое только по наведению?
4 раза пытался вставить код в гитхаб, 4 раза браузер умер
Очень полезный крутой урок, спасибо большое. лайк подписка. ) Единственное, что фрустрирует, так это то, что синема денег стоит, а кряки должным образом не работают. Есть возможность ведь создать анимацию и зарендерить ее в блендере например? Или, может, посоветуешь какое-нибудь доступное хорошее приложение на твой взгляд? буду благодарна.
У меня после создания secret gist и нажатия на row, на странице появляется ошибка 404. not found. Уже как только ни пробовал исправить, подскажите кто сталкивался с такой проблемой на gist.github.com?
Я скачиваю модель, но Cinema 4d говорит, что не известный формат, как это исправить?
Привет. Круто творишь. Как сделать бота на тильду? )
Потрясающее видео!
Существует ли возможность проигрывать разные 3d анимации при клике на объекты?
Допустим у меня есть шар он вращается. Я добавляю три кнопки в тильде и задаю для них разные анимации. При клике на одну кнопку шар останавливается и подсвечивается одна его часть. При клике на другую, останавливается и другая часть и тд.?
Возможно кто-то знает как такое реализовать?
подскажите пожалуйста, как и где установить cinema 4d на windows 10? не могу установить с рутрекера разными ссылками уже третий день)
А у меня вот вопрос. Получится ли в афтер эффекте сделать так же не с кадрами а с самой анимацией? то есть, если я сделаю анимацию в премьере и ее же сохраню через этот плагин, то же самое получится???
Привет, очень круто. Я такого не видел прям в шоке. А можно ли это сделать для мобильной устройства?
То, что я показываю в данном видео, прекрасно работает на мобильных устройствах
В-третьих несколько анимаций на сайте не будут заводиться никак.
При возвращении наверх 3д модель на сайте перезагружается и это жутко нервирует(
А можно будет вместо cinema 4d использовать блендер?
Привет, только начинаю работать на тильде, хотел бы узнать как правильно и аккуратно выравнивать элементы в рабочей зоне. ( Горячие клавиши может какие то, либо еще что. Изначально на зеро блоке есть вот эта вертикальная сетка и когда я пытаюсь выровнить какой либо элемент, то он постоянно смещается на несколько пикселей в лево или право). Надеюсь понятно объяснил и буду рад обратной связи! =)
Как же это сложно )