Чтобы SVG анимация срабатывала по мере того, как мы к ней доскроллим, нужно сделать несколько шагов: 1 шаг Назначить html элементу класс animstartsnew 2 шаг Установить html элементу анимацию - block on screen (просто установить, но не настраивать) 3 шаг Добавить скрипт $(window).scroll(function() { $(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()
@@seva_petrov Круто! В копилочку! Вот бы еще разобраться с вариативными шрифтами, как их внедрить в тильду. Типа такого deadsign.ru/tipografika/variable-fonts-past-present-and-future/
Поздравляю! Очень стильное видео по форме. По содержанию каждая минута интересна. Жаль, что всего 4 минуты! Да, и интересен был бы сам алгоритм настройки svg анимации😊.
Код для воспроизведения анимации, если блок находится ниже на лендосе: Нужно задать класс HTML элементу - animstartsnew $(window).scroll(function() { $(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()
Классная штука эта свг анимация. И у меня даже получилось её сделать! Но к сожалению только на главном экране. Скрипт для блока ниже почему-то не срабатывает(
Спасибо автору за полезные фишки! Но, сколько я посмотрел видео насчет анимации SVG в тильде, никто пока еще не показал как адаптировать анимацию под мобильные устройства!
инструмент отличный, спасибо большое! но есть вопрос: что делать с элементами, которые не на главном экране, а анимируются они сразу после открытия сайта? можно ли как-то настроить тригер element on screen для этого всего дела?
Подскажите, пожалуйста! Совершенно не разбираюсь в коде.... У меня не проигрывается анимация когда блок в середине сайта, снизу вы указали код, но я попросту не понимаю куда его нужно вставлять, в какой стиль и так далее
Сева, подскажи пожалуйста, как сделать чтобы эта анимация начала проигрываться когда элемент появляется на экране, а не при загрузке страницы. Добавляю эту анимацию не на первый экран, а в середину сайта. К моменту дохождения до нужного блока анимация уже проиграна) Что нужно в коде прописать и в каком месте? Очень нужно 🙏
Анастасия, могли бы вы скинуть данный код, очень нужно, вы бы мне очень помогли🙏🙏🙏, а то Сева не отвечает и нигде найти не могу( если вас не затруднит, напишите мне в телеграмм @wonderkar
@@seva_petrov дикция хорошая, классно получается, но есть один нюанс, вот это ээээ все портит) могу подсказать фишку как это легко улучшить: вместо ээээ просто делай паузы, это не будет критично зато не будет эээ и качество вещания сразу улучшится и станет более профессиональным) я этот момент подслушал у инструктора по речи
@@seva_petrov у тебя получится! Это у многих на ютубе такое и сразу впечатление портит, звучит очень аматорно, люди даже не знают что если немного подкрутить то уже будет звучать более профессионально.
Поделитесь, пожалуйста, кодом чтобы эта анимация начала проигрываться когда элемент появляется на экране, а не при загрузке страницы. Видимо много времени прошло и автор не отвечает в телеге.
Очень просто. Если удалить высоту и ширину в коде, как я на видео показал, то можно просто изменять ширину контейнера с кодом и изображение тоже будет изменяться)
Чтобы SVG анимация срабатывала по мере того, как мы к ней доскроллим, нужно сделать несколько шагов:
1 шаг
Назначить html элементу класс animstartsnew
2 шаг
Установить html элементу анимацию - block on screen (просто установить, но не настраивать)
3 шаг
Добавить скрипт
$(window).scroll(function() {
$(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()
Спасибо за прекрасный видос. И отдельное огромное спасибо за этот скрипт. Ты первый у кого мне удалось его найти. Все работает. Удачи и процветания.
За этот скрипт отдельное спасибо тебе, добрый человек!
Не работает
@@arturishoev и у меня нет работает((((
Это шикарно! Спасибо большое, Сева!
Ееее ☺️
Стисло та по суті!!! Спасибо огромное!!!!)) Благослови Вселенная таких людей, как этот автор!)))
О, даже у меня получилось! Йоху, спасибо, Сева!
Сева, благодарю очень!
Крутяк! Спасибо, Сева!
Сева, огонь! Спасибо за новые знания и плюшки :)
Еее) рад, что полезно
Отличное начало!) Успехов в дальнейших видосах. Инфа очень полезная 🔥
Спасибо большое ☺️
Побольше бы видео, про всякие плюшки в тильде₽
Буду стараться делать)
Вааау! Спасибо, особенное спасибо за информацию при скролле
Отличное видео! Спасибо за топ контент👌🏻
Спасибо)
Севчик спасибо. Пишу коммент для продвижения канала:) у тебя классный материал, ждем еще видосов, лайки с нас:)
Спасибо ☺️
Вообще жара!!!🙌
Комментарий поддержки от братана для братана😎 Видюха прям ВАХ вышла🔥оч круто!!!
Спасибо сестра 🥰
Супер!!!
Давай больше видео про анимацию, очень полезно 🔥
Ееее. Сделаю. Засылайте темы ✨
@@seva_petrov Круто! В копилочку! Вот бы еще разобраться с вариативными шрифтами, как их внедрить в тильду. Типа такого deadsign.ru/tipografika/variable-fonts-past-present-and-future/
Спасибо большое, быстро просто и классно, подписался, лукас запилил, запилил колокол, оставил комментарий!))
Поздравляю! Очень стильное видео по форме. По содержанию каждая минута интересна. Жаль, что всего 4 минуты! Да, и интересен был бы сам алгоритм настройки svg анимации😊.
Спасибо большое) Там все просто на самом деле. Регулировать можно только изинги. По сути вы выбираете только анимацию появления и ее длительность)
@@seva_petrov как раз с изингами проблема. В Тильде по наитию настраиваю их. Нет четкого понимания😊
А где кстати делается алгоритм? В фигме?
Огонь) возьму на заметку)
какая ламповая атмосфера)
Спасибо ☺️
Ееее 💡💡💡
Просто огонь!!! Спасибо!
Код для воспроизведения анимации, если блок находится ниже на лендосе:
Нужно задать класс HTML элементу - animstartsnew
$(window).scroll(function() {
$(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()
Классная штука эта свг анимация. И у меня даже получилось её сделать! Но к сожалению только на главном экране. Скрипт для блока ниже почему-то не срабатывает(
добрый день) у меня тоже почему-то не получается сделать не на главном экране, можете пожалуйста видео-дополнение записать?🙏🏻 было бы очень полезно!❤
Спасибо, очень полезный урок!)
Благодарочка!💯👍 Ждём ещё таких классных видосов!
Спасибо) будет 🌞
Клёвый контент!!!
Подписка - однозначно!)
Супер! подписка и лайки однозначно!!!
Спасибо за видео, пошла пробовать!😊
спасибо! очень круто, полезно и понятно. лайк
Фух, ну главное, что понятно) Спасибо 🙏
Очень ценно! Благодарю ❤️
Спасибо большое!
Шикарно
Спасибо автору за полезные фишки! Но, сколько я посмотрел видео насчет анимации SVG в тильде, никто пока еще не показал как адаптировать анимацию под мобильные устройства!
инструмент отличный, спасибо большое! но есть вопрос: что делать с элементами, которые не на главном экране, а анимируются они сразу после открытия сайта? можно ли как-то настроить тригер element on screen для этого всего дела?
Спасибо большое тебе! Да, можно есть скриптец. Напиши мне - скину)
Антон, подскажите, если Сева вам ответил, вы могли бы прикрепить скрипт сюда, в комментарии? А то Сева перестал отвечать(
Антон, могли бы вы мне скинуть скрипт, Сева не отвечает, а он мне очень бы помог🙏 напишите мне в телеграмм @wondwrkar , пожалуйста🙏
@@seva_petrov я бы тоже не отказался от скрипта)
Спасибо, реально полезный видос)
Спасибо 🙏
Все отлично. Только если ты упоминаешь какой-то сторонний онлайн сервис, то логично оставить на него ссылку под видео
Блин, точно! Извините меня неопытного ютубера. Щас поставлю
Подскажите, пожалуйста!
Совершенно не разбираюсь в коде.... У меня не проигрывается анимация когда блок в середине сайта, снизу вы указали код, но я попросту не понимаю куда его нужно вставлять, в какой стиль и так далее
Супер! спасибо :)
Остался вопрос, что нужно дописать, чтобы анимация срабатывала при появлении на экране?)
Вау, спасибо!))
🔥🔥🔥
Обычно я не пишу коменты 😅 но это было круто! 👍🔥
Хехех) кайфы
Сева, подскажи пожалуйста, как сделать чтобы эта анимация начала проигрываться когда элемент появляется на экране, а не при загрузке страницы. Добавляю эту анимацию не на первый экран, а в середину сайта. К моменту дохождения до нужного блока анимация уже проиграна) Что нужно в коде прописать и в каком месте? Очень нужно 🙏
Напиши мне в ТГ. Скину код ☺️
Анастасия, подскажите, если Сева вам ответил, вы могли бы прикрепить скрипт сюда, в комментарии? А то Сева перестал отвечать(
@@martazovilya Вам скинули код , можно мне тоже ?
Анастасия, могли бы вы скинуть данный код, очень нужно, вы бы мне очень помогли🙏🙏🙏, а то Сева не отвечает и нигде найти не могу( если вас не затруднит, напишите мне в телеграмм @wonderkar
@@seva_petrov Можете тоже объяснить?
А саму анимацию как сделали?
Анимацию на заставке? Или SVG анимацию?
@@seva_petrov саму анимацию в онлайн сервисе
Или это в фигме анимация была сделана?
@@acxatzhusupov что?)))
@@VladMolodetskiy в чем вопрос?
Крутяк!
После добавления кода анимации ничего не происходит (
Каеф.... 👍👍👍👍🔥🔥🔥🔥
💪💪💪
пушка👍🔥
Кайфец, Сева
Ееее)
@@seva_petrov сделай видос с обзором своих любимых плагинов фигмы, а так же видосы с сервисами и лайфхаками для тильды
@@seva_petrov дикция хорошая, классно получается, но есть один нюанс, вот это ээээ все портит) могу подсказать фишку как это легко улучшить: вместо ээээ просто делай паузы, это не будет критично зато не будет эээ и качество вещания сразу улучшится и станет более профессиональным) я этот момент подслушал у инструктора по речи
@@1974mura очень дельный совет! Спасибо большое) надеюсь избавлюсь от этих паразитов 🥲
@@seva_petrov у тебя получится! Это у многих на ютубе такое и сразу впечатление портит, звучит очень аматорно, люди даже не знают что если немного подкрутить то уже будет звучать более профессионально.
✌🏻
Кайф, спасибо
Поделитесь, пожалуйста, кодом чтобы эта анимация начала проигрываться когда элемент появляется на экране, а не при загрузке страницы. Видимо много времени прошло и автор не отвечает в телеге.
так для этого есть просто анимация тильды в настройках объекта
Отлично! Спасибо, Сева! Этот код мы можем вставить только в тильду? Он будет работать при вставке на самописный сайт?
Должен работать везде, т.к. сервис никак не связан с Тильдой.
Всё круто, только не понял, как была задана анимация текста и фигуры?
Обычные изинги ( появления) , там в самом сервисе есть пару десятков различных
А на редимаге так можно?
Везде так можно, где есть возможность вставки кода
вопрос не по теме, просто интересно, а шапка это обязательный атрибут дизайнера?
Да, голова мёрзнет)
Кто знает как зациклить эту анимацию пожалуйста люди добрые
+ подписка!
А как именно сделать эту анимацию?
Там можно настроить только изинги) эффекты появления
А как это дело адаптируется?
Очень просто. Если удалить высоту и ширину в коде, как я на видео показал, то можно просто изменять ширину контейнера с кодом и изображение тоже будет изменяться)