ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Внедрение SVG-анимации в Тильду
ฝัง
- เผยแพร่เมื่อ 14 มี.ค. 2021
- В этом видео вы поймете, что внедрить SVG анимацию - это просто. Используйте в своих проектах, пусть они будут уникальными. Ссылка на сервис svgartista.net
Инстраграм 👉 clck.ru/Tig9W
Telegram 👉 clck.ru/TigEZ
Ламповый telegram чат 👉 clck.ru/TigAu
Обнял ✨
Чтобы SVG анимация срабатывала по мере того, как мы к ней доскроллим, нужно сделать несколько шагов:
1 шаг
Назначить html элементу класс animstartsnew
2 шаг
Установить html элементу анимацию - block on screen (просто установить, но не настраивать)
3 шаг
Добавить скрипт
$(window).scroll(function() {
$(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()
Спасибо за прекрасный видос. И отдельное огромное спасибо за этот скрипт. Ты первый у кого мне удалось его найти. Все работает. Удачи и процветания.
За этот скрипт отдельное спасибо тебе, добрый человек!
Не работает
@@arturishoev и у меня нет работает((((
Побольше бы видео, про всякие плюшки в тильде₽
Буду стараться делать)
Это шикарно! Спасибо большое, Сева!
Ееее ☺️
Код для воспроизведения анимации, если блок находится ниже на лендосе:
Нужно задать класс HTML элементу - animstartsnew
$(window).scroll(function() {
$(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()
Классная штука эта свг анимация. И у меня даже получилось её сделать! Но к сожалению только на главном экране. Скрипт для блока ниже почему-то не срабатывает(
добрый день) у меня тоже почему-то не получается сделать не на главном экране, можете пожалуйста видео-дополнение записать?🙏🏻 было бы очень полезно!❤
Стисло та по суті!!! Спасибо огромное!!!!)) Благослови Вселенная таких людей, как этот автор!)))
Сева, огонь! Спасибо за новые знания и плюшки :)
Еее) рад, что полезно
Отличное начало!) Успехов в дальнейших видосах. Инфа очень полезная 🔥
Спасибо большое ☺️
Сева, благодарю очень!
О, даже у меня получилось! Йоху, спасибо, Сева!
Севчик спасибо. Пишу коммент для продвижения канала:) у тебя классный материал, ждем еще видосов, лайки с нас:)
Спасибо ☺️
Супер!!!
Давай больше видео про анимацию, очень полезно 🔥
Ееее. Сделаю. Засылайте темы ✨
@@seva_petrov Круто! В копилочку! Вот бы еще разобраться с вариативными шрифтами, как их внедрить в тильду. Типа такого deadsign.ru/tipografika/variable-fonts-past-present-and-future/
Отличное видео! Спасибо за топ контент👌🏻
Спасибо)
Крутяк! Спасибо, Сева!
Все отлично. Только если ты упоминаешь какой-то сторонний онлайн сервис, то логично оставить на него ссылку под видео
Блин, точно! Извините меня неопытного ютубера. Щас поставлю
Шикарно
Комментарий поддержки от братана для братана😎 Видюха прям ВАХ вышла🔥оч круто!!!
Спасибо сестра 🥰
Вообще жара!!!🙌
Поздравляю! Очень стильное видео по форме. По содержанию каждая минута интересна. Жаль, что всего 4 минуты! Да, и интересен был бы сам алгоритм настройки svg анимации😊.
Спасибо большое) Там все просто на самом деле. Регулировать можно только изинги. По сути вы выбираете только анимацию появления и ее длительность)
@@seva_petrov как раз с изингами проблема. В Тильде по наитию настраиваю их. Нет четкого понимания😊
А где кстати делается алгоритм? В фигме?
Вааау! Спасибо, особенное спасибо за информацию при скролле
Спасибо большое, быстро просто и классно, подписался, лукас запилил, запилил колокол, оставил комментарий!))
Благодарочка!💯👍 Ждём ещё таких классных видосов!
Спасибо) будет 🌞
какая ламповая атмосфера)
Спасибо ☺️
Ееее 💡💡💡
Спасибо, очень полезный урок!)
Огонь) возьму на заметку)
спасибо! очень круто, полезно и понятно. лайк
Фух, ну главное, что понятно) Спасибо 🙏
Просто огонь!!! Спасибо!
Супер! подписка и лайки однозначно!!!
🔥🔥🔥
Спасибо за видео, пошла пробовать!😊
Очень ценно! Благодарю ❤️
Спасибо автору за полезные фишки! Но, сколько я посмотрел видео насчет анимации SVG в тильде, никто пока еще не показал как адаптировать анимацию под мобильные устройства!
Клёвый контент!!!
Подписка - однозначно!)
Обычно я не пишу коменты 😅 но это было круто! 👍🔥
Хехех) кайфы
Спасибо большое!
Каеф.... 👍👍👍👍🔥🔥🔥🔥
💪💪💪
Спасибо, реально полезный видос)
Спасибо 🙏
Супер! спасибо :)
✌🏻
Вау, спасибо!))
Кайф, спасибо
инструмент отличный, спасибо большое! но есть вопрос: что делать с элементами, которые не на главном экране, а анимируются они сразу после открытия сайта? можно ли как-то настроить тригер element on screen для этого всего дела?
Спасибо большое тебе! Да, можно есть скриптец. Напиши мне - скину)
Антон, подскажите, если Сева вам ответил, вы могли бы прикрепить скрипт сюда, в комментарии? А то Сева перестал отвечать(
Антон, могли бы вы мне скинуть скрипт, Сева не отвечает, а он мне очень бы помог🙏 напишите мне в телеграмм @wondwrkar , пожалуйста🙏
@@seva_petrov я бы тоже не отказался от скрипта)
Остался вопрос, что нужно дописать, чтобы анимация срабатывала при появлении на экране?)
пушка👍🔥
Крутяк!
Кайфец, Сева
Ееее)
@@seva_petrov сделай видос с обзором своих любимых плагинов фигмы, а так же видосы с сервисами и лайфхаками для тильды
@@seva_petrov дикция хорошая, классно получается, но есть один нюанс, вот это ээээ все портит) могу подсказать фишку как это легко улучшить: вместо ээээ просто делай паузы, это не будет критично зато не будет эээ и качество вещания сразу улучшится и станет более профессиональным) я этот момент подслушал у инструктора по речи
@@1974mura очень дельный совет! Спасибо большое) надеюсь избавлюсь от этих паразитов 🥲
@@seva_petrov у тебя получится! Это у многих на ютубе такое и сразу впечатление портит, звучит очень аматорно, люди даже не знают что если немного подкрутить то уже будет звучать более профессионально.
Отлично! Спасибо, Сева! Этот код мы можем вставить только в тильду? Он будет работать при вставке на самописный сайт?
Должен работать везде, т.к. сервис никак не связан с Тильдой.
Подскажите, пожалуйста!
Совершенно не разбираюсь в коде.... У меня не проигрывается анимация когда блок в середине сайта, снизу вы указали код, но я попросту не понимаю куда его нужно вставлять, в какой стиль и так далее
+ подписка!
вопрос не по теме, просто интересно, а шапка это обязательный атрибут дизайнера?
Да, голова мёрзнет)
Кто знает как зациклить эту анимацию пожалуйста люди добрые
После добавления кода анимации ничего не происходит (
Поделитесь, пожалуйста, кодом чтобы эта анимация начала проигрываться когда элемент появляется на экране, а не при загрузке страницы. Видимо много времени прошло и автор не отвечает в телеге.
так для этого есть просто анимация тильды в настройках объекта
Сева, подскажи пожалуйста, как сделать чтобы эта анимация начала проигрываться когда элемент появляется на экране, а не при загрузке страницы. Добавляю эту анимацию не на первый экран, а в середину сайта. К моменту дохождения до нужного блока анимация уже проиграна) Что нужно в коде прописать и в каком месте? Очень нужно 🙏
Напиши мне в ТГ. Скину код ☺️
Анастасия, подскажите, если Сева вам ответил, вы могли бы прикрепить скрипт сюда, в комментарии? А то Сева перестал отвечать(
@@martazovilya Вам скинули код , можно мне тоже ?
Анастасия, могли бы вы скинуть данный код, очень нужно, вы бы мне очень помогли🙏🙏🙏, а то Сева не отвечает и нигде найти не могу( если вас не затруднит, напишите мне в телеграмм @wonderkar
@@seva_petrov Можете тоже объяснить?
Всё круто, только не понял, как была задана анимация текста и фигуры?
Обычные изинги ( появления) , там в самом сервисе есть пару десятков различных
А саму анимацию как сделали?
Анимацию на заставке? Или SVG анимацию?
@@seva_petrov саму анимацию в онлайн сервисе
Или это в фигме анимация была сделана?
@@acxatzhusupov что?)))
@@VladMolodetskiy в чем вопрос?
А на редимаге так можно?
Везде так можно, где есть возможность вставки кода
А как это дело адаптируется?
Очень просто. Если удалить высоту и ширину в коде, как я на видео показал, то можно просто изменять ширину контейнера с кодом и изображение тоже будет изменяться)
А как именно сделать эту анимацию?
Там можно настроить только изинги) эффекты появления
а как адаптив на мобилку сделать?\