Внедрение SVG-анимации в Тильду

  Рет қаралды 27,961

Seva Petrov

Seva Petrov

Күн бұрын

Пікірлер: 116
@seva_petrov
@seva_petrov 2 жыл бұрын
Чтобы SVG анимация срабатывала по мере того, как мы к ней доскроллим, нужно сделать несколько шагов: 1 шаг Назначить html элементу класс animstartsnew 2 шаг Установить html элементу анимацию - block on screen (просто установить, но не настраивать) 3 шаг Добавить скрипт $(window).scroll(function() { $(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()
@artemvasilev9220
@artemvasilev9220 2 жыл бұрын
Спасибо за прекрасный видос. И отдельное огромное спасибо за этот скрипт. Ты первый у кого мне удалось его найти. Все работает. Удачи и процветания.
@alyonak3013
@alyonak3013 Жыл бұрын
За этот скрипт отдельное спасибо тебе, добрый человек!
@arturishoev
@arturishoev Жыл бұрын
Не работает
@polinavoropaieva8070
@polinavoropaieva8070 Жыл бұрын
@@arturishoev и у меня нет работает((((
@juliaro4213
@juliaro4213 3 жыл бұрын
Это шикарно! Спасибо большое, Сева!
@seva_petrov
@seva_petrov 3 жыл бұрын
Ееее ☺️
@yaroslavasun
@yaroslavasun 3 жыл бұрын
Стисло та по суті!!! Спасибо огромное!!!!)) Благослови Вселенная таких людей, как этот автор!)))
@maunt-e
@maunt-e 3 жыл бұрын
Побольше бы видео, про всякие плюшки в тильде₽
@seva_petrov
@seva_petrov 3 жыл бұрын
Буду стараться делать)
@allanovichenko
@allanovichenko 3 жыл бұрын
О, даже у меня получилось! Йоху, спасибо, Сева!
@La_Comfort
@La_Comfort 2 жыл бұрын
Вааау! Спасибо, особенное спасибо за информацию при скролле
@Alina-tl9xu
@Alina-tl9xu 3 жыл бұрын
Сева, благодарю очень!
@dmitrykand5142
@dmitrykand5142 3 жыл бұрын
Вообще жара!!!🙌
@АнастасияЖукова-г5э
@АнастасияЖукова-г5э 3 жыл бұрын
Крутяк! Спасибо, Сева!
@aleksandraorlova3019
@aleksandraorlova3019 3 жыл бұрын
Сева, огонь! Спасибо за новые знания и плюшки :)
@seva_petrov
@seva_petrov 3 жыл бұрын
Еее) рад, что полезно
@max-vasilyev
@max-vasilyev 3 жыл бұрын
Севчик спасибо. Пишу коммент для продвижения канала:) у тебя классный материал, ждем еще видосов, лайки с нас:)
@seva_petrov
@seva_petrov 3 жыл бұрын
Спасибо ☺️
@user-LidenBrock
@user-LidenBrock 2 жыл бұрын
Огонь) возьму на заметку)
@krasavchikova_olga
@krasavchikova_olga 2 жыл бұрын
Просто огонь!!! Спасибо!
@dmytronalivko9437
@dmytronalivko9437 3 жыл бұрын
Отличное видео! Спасибо за топ контент👌🏻
@seva_petrov
@seva_petrov 3 жыл бұрын
Спасибо)
@olgadmitrieva5771
@olgadmitrieva5771 3 жыл бұрын
какая ламповая атмосфера)
@seva_petrov
@seva_petrov 3 жыл бұрын
Спасибо ☺️
@seva_petrov
@seva_petrov 3 жыл бұрын
Ееее 💡💡💡
@Marina-Isaeva-web
@Marina-Isaeva-web Жыл бұрын
Спасибо большое!
@Cool2ra
@Cool2ra 3 жыл бұрын
Спасибо большое, быстро просто и классно, подписался, лукас запилил, запилил колокол, оставил комментарий!))
@seva_petrov
@seva_petrov 3 жыл бұрын
Код для воспроизведения анимации, если блок находится ниже на лендосе: Нужно задать класс HTML элементу - animstartsnew $(window).scroll(function() { $(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()
@oleksandr_bezuhlyi
@oleksandr_bezuhlyi 3 жыл бұрын
Классная штука эта свг анимация. И у меня даже получилось её сделать! Но к сожалению только на главном экране. Скрипт для блока ниже почему-то не срабатывает(
@ИринаБорисенко-р4к
@ИринаБорисенко-р4к 3 жыл бұрын
добрый день) у меня тоже почему-то не получается сделать не на главном экране, можете пожалуйста видео-дополнение записать?🙏🏻 было бы очень полезно!❤
@m-mukhanov
@m-mukhanov 3 жыл бұрын
Отличное начало!) Успехов в дальнейших видосах. Инфа очень полезная 🔥
@seva_petrov
@seva_petrov 3 жыл бұрын
Спасибо большое ☺️
@ИльяИванов-в2ю
@ИльяИванов-в2ю 9 ай бұрын
Шикарно
@antonishanya
@antonishanya 3 жыл бұрын
инструмент отличный, спасибо большое! но есть вопрос: что делать с элементами, которые не на главном экране, а анимируются они сразу после открытия сайта? можно ли как-то настроить тригер element on screen для этого всего дела?
@seva_petrov
@seva_petrov 3 жыл бұрын
Спасибо большое тебе! Да, можно есть скриптец. Напиши мне - скину)
@martazovilya
@martazovilya 3 жыл бұрын
Антон, подскажите, если Сева вам ответил, вы могли бы прикрепить скрипт сюда, в комментарии? А то Сева перестал отвечать(
@karina.martazova
@karina.martazova 3 жыл бұрын
Антон, могли бы вы мне скинуть скрипт, Сева не отвечает, а он мне очень бы помог🙏 напишите мне в телеграмм @wondwrkar , пожалуйста🙏
@Bugrovstudio
@Bugrovstudio 2 жыл бұрын
@@seva_petrov я бы тоже не отказался от скрипта)
@yesmish7
@yesmish7 3 жыл бұрын
Все отлично. Только если ты упоминаешь какой-то сторонний онлайн сервис, то логично оставить на него ссылку под видео
@seva_petrov
@seva_petrov 3 жыл бұрын
Блин, точно! Извините меня неопытного ютубера. Щас поставлю
@JuliaSuleimanova
@JuliaSuleimanova 3 жыл бұрын
Спасибо, очень полезный урок!)
@reality-channel8370
@reality-channel8370 3 жыл бұрын
Супер! подписка и лайки однозначно!!!
@ОльгаЛукьянова-ы9о
@ОльгаЛукьянова-ы9о 3 жыл бұрын
Супер!!! Давай больше видео про анимацию, очень полезно 🔥
@seva_petrov
@seva_petrov 3 жыл бұрын
Ееее. Сделаю. Засылайте темы ✨
@ЛабораторияНовыхТехнологий
@ЛабораторияНовыхТехнологий 3 жыл бұрын
@@seva_petrov Круто! В копилочку! Вот бы еще разобраться с вариативными шрифтами, как их внедрить в тильду. Типа такого deadsign.ru/tipografika/variable-fonts-past-present-and-future/
@op_design
@op_design 3 жыл бұрын
Комментарий поддержки от братана для братана😎 Видюха прям ВАХ вышла🔥оч круто!!!
@seva_petrov
@seva_petrov 3 жыл бұрын
Спасибо сестра 🥰
@diana_ilfarovna
@diana_ilfarovna 3 жыл бұрын
Спасибо за видео, пошла пробовать!😊
@cats-hair-on-a-table
@cats-hair-on-a-table 3 жыл бұрын
спасибо! очень круто, полезно и понятно. лайк
@seva_petrov
@seva_petrov 3 жыл бұрын
Фух, ну главное, что понятно) Спасибо 🙏
@vasto1
@vasto1 3 жыл бұрын
Клёвый контент!!! Подписка - однозначно!)
@pavelgaydukov
@pavelgaydukov 3 жыл бұрын
Очень ценно! Благодарю ❤️
@alexeybayanov2698
@alexeybayanov2698 3 жыл бұрын
А саму анимацию как сделали?
@seva_petrov
@seva_petrov 3 жыл бұрын
Анимацию на заставке? Или SVG анимацию?
@acxatzhusupov
@acxatzhusupov 3 жыл бұрын
@@seva_petrov саму анимацию в онлайн сервисе
@acxatzhusupov
@acxatzhusupov 3 жыл бұрын
Или это в фигме анимация была сделана?
@VladMolodetskiy
@VladMolodetskiy 3 жыл бұрын
@@acxatzhusupov что?)))
@acxatzhusupov
@acxatzhusupov 3 жыл бұрын
@@VladMolodetskiy в чем вопрос?
@LKWitch
@LKWitch 3 жыл бұрын
Поздравляю! Очень стильное видео по форме. По содержанию каждая минута интересна. Жаль, что всего 4 минуты! Да, и интересен был бы сам алгоритм настройки svg анимации😊.
@seva_petrov
@seva_petrov 3 жыл бұрын
Спасибо большое) Там все просто на самом деле. Регулировать можно только изинги. По сути вы выбираете только анимацию появления и ее длительность)
@LKWitch
@LKWitch 3 жыл бұрын
@@seva_petrov как раз с изингами проблема. В Тильде по наитию настраиваю их. Нет четкого понимания😊
@elenavakk
@elenavakk Жыл бұрын
А где кстати делается алгоритм? В фигме?
@Dibka_podrujka
@Dibka_podrujka 3 жыл бұрын
Спасибо автору за полезные фишки! Но, сколько я посмотрел видео насчет анимации SVG в тильде, никто пока еще не показал как адаптировать анимацию под мобильные устройства!
@oleksandr_bezuhlyi
@oleksandr_bezuhlyi 3 жыл бұрын
Благодарочка!💯👍 Ждём ещё таких классных видосов!
@seva_petrov
@seva_petrov 3 жыл бұрын
Спасибо) будет 🌞
@ДарьяЛеонович-ь9з
@ДарьяЛеонович-ь9з 3 жыл бұрын
Супер! спасибо :)
@Soper84
@Soper84 3 жыл бұрын
Остался вопрос, что нужно дописать, чтобы анимация срабатывала при появлении на экране?)
@julkashu
@julkashu 3 жыл бұрын
Спасибо, реально полезный видос)
@seva_petrov
@seva_petrov 3 жыл бұрын
Спасибо 🙏
@alenamaslova8958
@alenamaslova8958 3 жыл бұрын
Вау, спасибо!))
@АгатаМальцева
@АгатаМальцева 2 жыл бұрын
Подскажите, пожалуйста! Совершенно не разбираюсь в коде.... У меня не проигрывается анимация когда блок в середине сайта, снизу вы указали код, но я попросту не понимаю куда его нужно вставлять, в какой стиль и так далее
@vitori_top
@vitori_top 3 жыл бұрын
Обычно я не пишу коменты 😅 но это было круто! 👍🔥
@seva_petrov
@seva_petrov 3 жыл бұрын
Хехех) кайфы
@pavelkorolev4575
@pavelkorolev4575 3 жыл бұрын
Кайф, спасибо
@АнастасияЖукова-г5э
@АнастасияЖукова-г5э 3 жыл бұрын
Сева, подскажи пожалуйста, как сделать чтобы эта анимация начала проигрываться когда элемент появляется на экране, а не при загрузке страницы. Добавляю эту анимацию не на первый экран, а в середину сайта. К моменту дохождения до нужного блока анимация уже проиграна) Что нужно в коде прописать и в каком месте? Очень нужно 🙏
@seva_petrov
@seva_petrov 3 жыл бұрын
Напиши мне в ТГ. Скину код ☺️
@martazovilya
@martazovilya 3 жыл бұрын
Анастасия, подскажите, если Сева вам ответил, вы могли бы прикрепить скрипт сюда, в комментарии? А то Сева перестал отвечать(
@warinucrain9823
@warinucrain9823 3 жыл бұрын
@@martazovilya Вам скинули код , можно мне тоже ?
@karina.martazova
@karina.martazova 3 жыл бұрын
Анастасия, могли бы вы скинуть данный код, очень нужно, вы бы мне очень помогли🙏🙏🙏, а то Сева не отвечает и нигде найти не могу( если вас не затруднит, напишите мне в телеграмм @wonderkar
@поао123
@поао123 Жыл бұрын
@@seva_petrov Можете тоже объяснить?
@alenalastovko9305
@alenalastovko9305 3 жыл бұрын
Отлично! Спасибо, Сева! Этот код мы можем вставить только в тильду? Он будет работать при вставке на самописный сайт?
@alpastukhov
@alpastukhov 3 жыл бұрын
Должен работать везде, т.к. сервис никак не связан с Тильдой.
@romayakovenko
@romayakovenko 3 жыл бұрын
🔥🔥🔥
@bboy_dom
@bboy_dom 3 жыл бұрын
пушка👍🔥
@1974mura
@1974mura 3 жыл бұрын
Кайфец, Сева
@seva_petrov
@seva_petrov 3 жыл бұрын
Ееее)
@1974mura
@1974mura 3 жыл бұрын
@@seva_petrov сделай видос с обзором своих любимых плагинов фигмы, а так же видосы с сервисами и лайфхаками для тильды
@1974mura
@1974mura 3 жыл бұрын
@@seva_petrov дикция хорошая, классно получается, но есть один нюанс, вот это ээээ все портит) могу подсказать фишку как это легко улучшить: вместо ээээ просто делай паузы, это не будет критично зато не будет эээ и качество вещания сразу улучшится и станет более профессиональным) я этот момент подслушал у инструктора по речи
@seva_petrov
@seva_petrov 3 жыл бұрын
@@1974mura очень дельный совет! Спасибо большое) надеюсь избавлюсь от этих паразитов 🥲
@1974mura
@1974mura 3 жыл бұрын
@@seva_petrov у тебя получится! Это у многих на ютубе такое и сразу впечатление портит, звучит очень аматорно, люди даже не знают что если немного подкрутить то уже будет звучать более профессионально.
@themax1867
@themax1867 3 жыл бұрын
Каеф.... 👍👍👍👍🔥🔥🔥🔥
@seva_petrov
@seva_petrov 3 жыл бұрын
💪💪💪
@victordenisov8501
@victordenisov8501 3 жыл бұрын
Всё круто, только не понял, как была задана анимация текста и фигуры?
@seva_petrov
@seva_petrov 3 жыл бұрын
Обычные изинги ( появления) , там в самом сервисе есть пару десятков различных
@maxvolgin4745
@maxvolgin4745 3 жыл бұрын
После добавления кода анимации ничего не происходит (
@ЯрославЛетний-э1н
@ЯрославЛетний-э1н 3 жыл бұрын
Поделитесь, пожалуйста, кодом чтобы эта анимация начала проигрываться когда элемент появляется на экране, а не при загрузке страницы. Видимо много времени прошло и автор не отвечает в телеге.
@ВалераСергеев-ю5ж
@ВалераСергеев-ю5ж 2 жыл бұрын
так для этого есть просто анимация тильды в настройках объекта
@ЯчторЗябь
@ЯчторЗябь 3 жыл бұрын
вопрос не по теме, просто интересно, а шапка это обязательный атрибут дизайнера?
@seva_petrov
@seva_petrov 3 жыл бұрын
Да, голова мёрзнет)
@HredFuzz
@HredFuzz 2 жыл бұрын
А на редимаге так можно?
@seva_petrov
@seva_petrov 2 жыл бұрын
Везде так можно, где есть возможность вставки кода
@komarovaeee
@komarovaeee 3 жыл бұрын
Крутяк!
@nekchich5565
@nekchich5565 3 жыл бұрын
✌🏻
@АРТПРОЕКТ-р7з
@АРТПРОЕКТ-р7з 3 жыл бұрын
+ подписка!
@ВаняМалиш
@ВаняМалиш 3 жыл бұрын
А как именно сделать эту анимацию?
@seva_petrov
@seva_petrov 3 жыл бұрын
Там можно настроить только изинги) эффекты появления
@Елена-у9о6м
@Елена-у9о6м 3 жыл бұрын
Кто знает как зациклить эту анимацию пожалуйста люди добрые
@costa13play
@costa13play 3 жыл бұрын
А как это дело адаптируется?
@seva_petrov
@seva_petrov 3 жыл бұрын
Очень просто. Если удалить высоту и ширину в коде, как я на видео показал, то можно просто изменять ширину контейнера с кодом и изображение тоже будет изменяться)
Their Boat Engine Fell Off
0:13
Newsflare
Рет қаралды 15 МЛН
УНО Реверс в Амонг Ас : игра на выбывание
0:19
Фани Хани
Рет қаралды 1,3 МЛН
Маусымашар-2023 / Гала-концерт / АТУ қоштасу
1:27:35
Jaidarman OFFICIAL / JCI
Рет қаралды 390 М.
Lottie-анимация в тильде
23:34
Макс Щукин — design by max
Рет қаралды 7 М.
Как перенести из фигмы в тильду: импорт макета за 5 минут
13:27
Даниил Рязанцев: правильный веб-дизайн
Рет қаралды 3 М.
Создание и анимация персонажа в Blender
16:33
Еще одна аху#### анимация на CSS и SVG
12:49
Анна Блок
Рет қаралды 12 М.
Курс After Effects #11. Экспорт из АЕ видео для ютуба в .avi / .mp4 и анимации в .svg
18:07
Three.js на Tilda! Как вставить 3D сцену в Zero Block
10:29
Дизайнер со скриптами
Рет қаралды 30 М.
Обалденная 3D анимация в Тильде в Зеро Блок по скроллу
13:20
Дизайнер со скриптами
Рет қаралды 49 М.