Как сделать анимированный фон из частиц в Tilda Zero block с помощью Patricles JS

Рет қаралды 39,470

4 жыл бұрын

Как сделать анимированный фон из частиц в Tilda Zero block с помощью Patricles JS
В этом видео я покажу, как легко сделать красивый, анимированный фон для тильды из частиц, которые будут реагировать на указатель мыши. Использовать будем Zero block и плагин Patricles JS.
Частицы для фона можно настроить на сайте: vincentgarreau.com/particles.js/
Код для тильды: yadi.sk/d/YfPUfixKjd4-Vw
1. Создаем zero block.
2. Переходим на сайт Particles JS, настраиваем частицы, добавляем фон. Нажимаем CodePen.
3. Создаем 3 блока html на тильда.
4. Копируем туда код из моего текстового файла.
5. Вставляем css и js код, полученные на сайте.
___________________________________________
✅Поделись видео с друзьями: • Как сделать анимирован...
✅Подпишись на канал и поставь🔔: / @design_scripts
Как сделать анимированный фон из частиц в Tilda Zero block с помощью Patricles JS
___________________________________________
ВК: id117174434
Instagram: / bistricky_stanislav
Email: rootdesign.help@gmail.com

Пікірлер: 162

@design_scripts 3 жыл бұрын

Многие интересуются, как добавить второй (третий, четвертый, пятый....) блок с частицами. Чтобы каждому не пересылать одно и то же, написал для вас инструкцию, мои дорогие: yadi.sk/i/kV6B8ZYBYwFqcA

@user-ew1jl5pb1w 3 жыл бұрын

Спасибо огромное! Все просто, доступно, без воды!!!!

@dkosarev3105 9 ай бұрын

Большое спасибо за такой подробный разбор! 👍👍

@user-rj1lt2xr6p 3 жыл бұрын

Спасибо! Все доступно. Сразу получилось, как надо)

@nastiboss 3 жыл бұрын

Это пушкааа! У меня получилось, спасибо 🔥🔥🔥

@dallaspayne8610 4 жыл бұрын

анимированный фон на зеро блок выглядит интересно. классный эффект частиц

@root3690 4 жыл бұрын

Спасибо, как раз нужно было сделать анимированный фон из частиц для обложки на tilda, искал js код

@user-kr3nu5fw4x Жыл бұрын

Спасибище , Станислав, давно о такой фишке мечтала!!!

@user-qb3uq5zs8y 3 жыл бұрын

Спасибо тебе) Всё всё получилось, клиент доволен)

@user-yg5ct7to6n 2 жыл бұрын

Спасибо! Просто супееер. это то, что я искала!!!

@iliakorablev 3 жыл бұрын

Вау, так просто)))) Спасибо огромное!

@heylyu 3 жыл бұрын

Очень крутой канал!! Продолжайте 🙏🏼

@aginivan 3 жыл бұрын

Очень круто! Спасибо большое!

@whatisaiina 2 жыл бұрын

Thank you so much! This was really helpful, easy to follow even though I don't understand Russian! (:

@milton2194 4 жыл бұрын

Вот за это и люблю zero block на тильда. Не знал, что можно еще дополнительно настроить particle js xD

@EQADEHYL 2 жыл бұрын

ПУШКА! Спасибо, дорогой друг!

@4etkiy_sport 3 жыл бұрын

Как же круто всё и просто !!

@vyacheslavkalyuga3633 2 жыл бұрын

Сделал все как на видео. Все работает. Спасибо

@user-vd3lu4pt5w 3 жыл бұрын

А!Всё получилось)) Норм. Спасибо за видос!

@jd_anders Жыл бұрын

Все получилось, спасибо за видео 🤩🤩🤩

@user-xk8us4zh8u 3 жыл бұрын

Спасибо! Получилось, осталось применить))

@user-hq2ih1hc1y 2 жыл бұрын

Круто, спасибо огромное)

@user-ds1ln6vg2d 4 жыл бұрын

Супер, Спасибо!

@user-on6ll9nz9u 3 жыл бұрын

Класс😍😍😍 спасибо вам большое

@max-vasilyev 4 жыл бұрын

Спасибо за видео Бро. Прикольно получилось

@elenaafanaseva4416 9 ай бұрын

Подскажите пожалуйста а можно ли на этом звезднном фоне что то разместить текст или картинку. Спасибо

@djohnvolchanskiy1264 3 жыл бұрын

Супер!!! Спасибо

@user-ti5xo5ud4i 3 жыл бұрын

Спасибо, круто смотрится на сайте!

@design_scripts 3 жыл бұрын

Пожалуйста 😉

@montario7090 3 жыл бұрын

Тоооп!!!👏🏼👏🏼👏🏼

@Green_Gorilla_ 3 жыл бұрын

Дай бог тебе здоровья)

@user-mg5is7hv7m 2 жыл бұрын

Спасибо! Огонь!

@raminmammadov2658 3 ай бұрын

Супер Спасибо вам.

@user-su4yw7mz2j 3 жыл бұрын

Привет, столкнулся с проблемой на тильде, в zero block могу вставить только видео с youtube или vimeo, но есть необходимость добавление своего файла, причем c защитой его от копирования, хотя бы на примитивном уровне :) Буду признателен какому-либо подобному видео. В целом о канале очень доступно, не надо додумывать! Молодец!

@design_scripts 3 жыл бұрын

Интересная тема. Ты же знаешь, что на саму тильду добавлять свои файлы нельзя?) Лично я это ограничение обхожу с помощью github. Попробую разобраться и скину ответ сюда же в этот коммент)

@snlife5592 Жыл бұрын

Готова миллион лайков поставить за это видео)))

@charliedarst 2 жыл бұрын

капец ты крутой! спасибо большое!

@CobaElle 2 жыл бұрын

Спасибо, у меня получилось!))

@svetlanaspivak8920 3 жыл бұрын

Станислав, спасибо, все получилось, круто! Вопрос, а можно вместо треугольников вставить другие картинки?

@design_scripts 3 жыл бұрын

Кастомизировать можно все, что предлагает vincentgarreau.com/particles.js/ Можно поставить свою картинку вместо частиц. Однако, то, как эти частицы соединяются друг с другом (образуя треугольники), насколько я помню, поменять нельзя

@olgatsyots 2 жыл бұрын

Спасибо!

@dmitriyreise7814 Жыл бұрын

большое спасибо!

@kannsky8812 Жыл бұрын

боже, это круто!

@asxatnurbek8034 2 жыл бұрын

krasavchik spasibo

@user-mc6zu6tr8z 3 жыл бұрын

А как сделать что бы этот эффект применялся к нескольким блокам на сайте?

@VoidVison 2 жыл бұрын

круто круто! а на сколько ява тормозит на компах? помню раньше ее вообще отключали в настройках браузера чтобы ничего не глючело

@abdiqaisar 3 жыл бұрын

рахмет

@user-rm2qo2xd1j Жыл бұрын

Добрый день! Подскажите пожалуйста, можно ли применить этот эффект к нескольким блокам сразу?

@Aggressman Жыл бұрын

Благодарю! Все получилось, но есть вопрос - как убрать виджет с углу слева? все сделал по видео, но при опубликовании страницы остается счетчик мб и фпс.

@edwardsemeniv 3 жыл бұрын

А как сделать что бы в моб. версии частицы падали вниз по всему блоку, а то анимация заканчивается по середине блока.

@maryti7181 2 жыл бұрын

Очень круто, спасибо, а я не нарушу авторские права использовав это?

@rysanoff 3 жыл бұрын

А как сделать так, чтобы на этот анимационный фон можно было вставлять текст, фото? (И почему у меня анимация заняла место html-блоков, а блок zero остался пустым на опубликованном сайте?

@yegorkupriienko7098 2 жыл бұрын

Здравствуйте! Подскажите, а можно этот эффект применить для шейпа?

@spv7-rudnyk 4 ай бұрын

привет спасибо, надеюсь на новые видео спасибо тебе

@sergeyageev2913 3 жыл бұрын

Видео класс! Но, не все могут переходить на яндекс ссылки( Из-за чего не могу пользоваться кодом(

@ArsAzm 3 жыл бұрын

Спасибо за отличное видео. Я так понимаю не обязательно в зероблок ставить, можно и в любой другой блок вставить фон таким образом, верно? П.С. Подписка, лайк )

@design_scripts 3 жыл бұрын

можно в любой, но нужно правильно написать в коде, КУДА вставлять эффект. Простой заменой id блока обойтись не получится

@mr.vintage3227 3 жыл бұрын

@@design_scripts а в виде это трудно было показать??? Как вставить в другой блок?

@design_scripts 3 жыл бұрын

У каждого блока свои классы элементов, своя структура. Мне тебе для каждого блока сделать методичку, что и где заменять? Учи css и сам подстраивай под нужный тебе блок

@aleks6607 3 жыл бұрын

Добрый вечер) очень крутой контент)) а подскажите, можно ли такой фон вставить в стандартный блок? Просто поменять id ?

@design_scripts 3 жыл бұрын

Спасибо) Все зависит от того, что это за блок. Нужно изменить не только id, но и второй класс t-filter (и что там в коде, уже не помню)

@aleks6607 3 жыл бұрын

@@design_scripts хочу поменять фон в форме с множеством полей, не помню номер блока( А этот t-filter искать при нажатии «исследовать элемент»?

@user-jh1rf2ef9q 2 жыл бұрын

Добрый день, подскажите пожалуйста, как сделать, чтобы анимация показывалась не на всем зероблоке, а в конкретном шейпе этого зеро блока? Я попыталась вместо id зеро блока вставить класс шейпа, но не работает(((

@DNikitosich 4 жыл бұрын

Абалденый урок!

@design_scripts 3 жыл бұрын

От души

@user-tc9db8cc1m 2 жыл бұрын

Добрый день, как из codepen устанавливать стили на тильду, есть рабочий совет? html видимо надо редачить

@dariaanimate 3 жыл бұрын

У меня не работает. Писала на Тильда, сказали обратиться к разработчику кода. Жаль, хотелось бы добавить этот эффект.

@giuliakurbanova6895 Жыл бұрын

Здравствуйте. а можно эти частицы заменить на что-то другое?

@cucumber_nik1tki 3 жыл бұрын

Привет. Ты реально крутой бро! Подскажи хочу в мобильной версии при скролле зафиксить фото! Возможно ли такое! Заранее спасибо дружище!

@OlgaSunSun 3 ай бұрын

Вопрос: как поставить полученную анимацию на фон сайта под все блоки, которые имеют прозрачный фон?

@kler601 8 ай бұрын

Скажи,пожалуйста,сделала 2 блока с анимацией,но между ними Лэйбл made on Tilda.Как убрать или сделать так чтоб Лэйбл внизу был а два блока прилегали друг к другу?

@kseniabarsi2935 3 жыл бұрын

Попробовала сделать, но на обложке из зеро без элементов отлично работает, а если добавлять кнопки и надписи не работает.(

@WEBnew228 2 жыл бұрын

В бесплатной версий тильды можно так делать?вставлять код

@GeorgeTotoro 3 жыл бұрын

Доброго дня, как можно применить частицы на все страницы в тильда? перечислением во втором блоке или для каждого необходимо свой второй блок создавать? заранее спасибо за ответ

@design_scripts 3 жыл бұрын

Доброго дня. Если нужно сделать фоном на все страницы, то я недавно помогал одному человеку с такой просьбой. Основная идея в том, чтобы создать зеро блок с высотой 0px, включить owerflow:visible, добавить шейп, растянуть его по высоте, зафиксировать при скролле и на этот шейп повесить анимацию частиц. Чтобы разом добавить такой фон на весь сайт, этот зеро блок можно поместить в хедер

@user-yk3pr3qc1y 3 жыл бұрын

@@design_scripts а можно уточнить как повесить на шейп? У меня этот блок перекрывает основной текст страницы, не могу понять как сделать его именно фоном, то есть загнать под остальные блоки... Спасибо :)

@user-kj4sb1zy3e 4 жыл бұрын

Почему-то отображается фон только в том бразуере, где создавал фон, а в других не работает. Сталкивались с такой проблемой?

@bestdeepfm 2 жыл бұрын

решили вопрос?

@user-uv5cj8wx4m 3 жыл бұрын

Станислав, добрый день! Почему-то на смартфоне не появляется анимация. Нужно так же скопировать этот ZERO block и вставить в код два ID?

@bestdeepfm 2 жыл бұрын

привет, решили вопрос?

@user-jq9lp1ou9f 3 жыл бұрын

Можно ли поставить 2 блока с разным бэком? Пробую, но при добавлении второго блока (по такому же алгоритму), перестаёт работать первый. Как можно решить проблему?

@design_scripts 3 жыл бұрын

Если еще актуально. Вот, написал инструкцию: yadi.sk/i/kV6B8ZYBYwFqcA

@marysheff5562 Жыл бұрын

@@design_scriptsСпасибо огромное за инструкцию!!!! Сейчас столкнулась с этой проблемой, как здорово что сразу нашла ответ!

@kazakjanys4212 3 жыл бұрын

уау

@arystanomarbayev381 2 жыл бұрын

добрый день! а как адаптировать фон под моб.версию?

@die4iklive175 3 жыл бұрын

А как это на вордпресс поставить?

@DZEN-TV 2 жыл бұрын

у меня не получилось. сделала все по инструкции, в чем может быть проблема?

@user-be2hr2xp8o Жыл бұрын

Не удается экспортировать изображение для частиц. Выдает пустую страницу, как быть?

@user-hj9rs1oo2l 2 ай бұрын

Здравствуйте, подскажите, а как настроить этот код для мобильной версии???

@misstriskira 3 жыл бұрын

А где ссылки на вас в соц сетях?

@galymnurbek9937 2 жыл бұрын

Как поставить текс фото на анимацию ?

@bondimax 3 жыл бұрын

возможно ли оставлять файлы с кодами не на яндекс,а гугл диске например? я просто с Украины и не могу открыть документ(

@vadymkorin8985 3 жыл бұрын

Как применить ко всем блокам?

@larisabelka 4 ай бұрын

Здравствуйте. Мне вот тоже очень интересно, как сверху анимации сделать текст и фото. Вот был бы классный видос. Но похоже на комменты автор не отвечает.

@averzhi Жыл бұрын

Чувак, хочу у тебя учиться

@TimTim-fc4uw 4 жыл бұрын

Добрый день! как добавлять виджеты, через Zero block ?

@design_scripts 4 жыл бұрын

Нажмите в редакторе зеро блока на плюс, затем на "Add HTML", и после этого вы можете вставить в данный элемент код нужного вам виджета. Кстати, положение блока с html в Zero block влияет на расположение виджета на опубликованном сайте. Также есть возможность сделать свой виджет из зеро блока. Об этому расскажу в одном из следующих видео. 40 полезных сервисов, которые можно интегрировать в зеро блок с помощью html: tilda.education/articles-tilda-level-up

@romannekhaev2842 3 жыл бұрын

В мобильной версии частицы двигаются в 3 раза быстрей, в чём может быть дело?

@design_scripts 3 жыл бұрын

Не встречался ещё с такой проблемой. Попробуй для мобильной версии с помощью @media screen and (max-width: 960px) (из видео про верстку под full hd) уменьшить параметр скорости или же просто создай отдельный блок с уменьшенной скоростью под мобильные устройства. Но это все костыли - пиши в вк или инсту с ссылкой на проблемную страницу. Попробуем вместе решить

@zsnyakbogdan 3 жыл бұрын

Привет) Подскажи, если знаешь, как можно сделать анимированный фоновый шум? Спасибо 🙂

@design_scripts 3 жыл бұрын

Привет, у тильдошной есть статья на эту тему: tildoshnaya.com/modification/pattern Честно говоря, не знаю, как они отреагируют, если я сворую их код и сделаю видео)

@zsnyakbogdan 3 жыл бұрын

@@design_scripts Ахаха, мне хватит :) Спасибо большое 🔥

@user-vd3lu4pt5w 3 жыл бұрын

а как на этот фон накинуть текст?

@mityarave 2 жыл бұрын

Блин ребята, а нет ли способа применить сразу ко всей странице? Заранее благодарю

@user-qx7rl4gi2t 3 жыл бұрын

Добрый день. У меня зеро блок большой по высоте (1600 px). Когда делаю фон из падающих звезд, они меняю пропорции и тоже растягиваются по высоте. Выглядят как полоски( Не знаете, как можно решить проблему?

@design_scripts 3 жыл бұрын

Привет, можно на "ты" :) Нужно в изменить height: 100% на height: 1600px

@user-qx7rl4gi2t 3 жыл бұрын

@@design_scripts Спасибо большое! Все работает)

@user-qx7rl4gi2t 3 жыл бұрын

@@design_scripts если можно, еще такой вопрос: возможно ли отключить фон на мобильных устройствах, а оставить только на ПК?

@design_scripts 3 жыл бұрын

Легче всего будет сделать отдельно блок для мобильных и отдельно для десктопов. В настройках зеро блоков просто указать, в каком диапазоне блоки будут отображаться. Также можно обернуть скрипты в следующий код: if ($(window).width() > 960) { //тут скрипт, который выполняется, если ширина экрана более 960px }

@user-dy3qq9oc3d 3 жыл бұрын

а его можно на стандартные блоки добавить?

@design_scripts 3 жыл бұрын

Да, без проблем. Нужно только верно указать, куда именно нужно вставить эффект в строчке ниже: $("#particles-js").appendTo('#rec219937842 .t-cover__filter'); (это пример для стандартной обложки CR01)

@user-dy3qq9oc3d 3 жыл бұрын

@@design_scripts спасибо бро. если не пойму еще напишу

@abris8442 4 жыл бұрын

У меня к сожалению, не работает. Только моргает часть экрана, где должна быть заставка и все-белый прямоугольник.Может подскажете, где ошибка?

@design_scripts 3 жыл бұрын

Если проблема еще актуальна, пиши в вк, исправим

@abris8442 3 жыл бұрын

@@design_scripts Спасибо, исправил.

@abris8442 3 жыл бұрын

Подскажите, а этот эффект "утяжеляет" сайт или нет?

@design_scripts 3 жыл бұрын

@@abris8442 Первые три страницы гугла на русском и английском молчат, сам я не проверял. Нужно тестить

@supermortlife 3 жыл бұрын

Все круто получилось, но у меня эффект упорно вставляется под зеро блоком на который я хочу его наложить((

@design_scripts 3 жыл бұрын

Такое случается, когда криво добавляешь к зеро блоку класс. Напиши в вк, помогу ;D

@user-rs6kb4yd2i 3 жыл бұрын

@@design_scripts у меня тоже эффект под зеро блоком получился. как исправить?

@user-il7yr2ty7x 2 жыл бұрын

Привет) Не открывается код для Тильды

@SCRAG 3 жыл бұрын

кто подскажет как сделать этот код как фоном ВСЕЙ страницы, а не одного блока

@design_scripts 3 жыл бұрын

Добавить эффект частиц на зеро блок, а сам зеро блок высотой и шириной 100% фиксировать по скроллу позади остальных элементов на сайте

@nat_taria 3 жыл бұрын

@@design_scripts а как это можно сделать?

@user-te8jw3sc5r 3 жыл бұрын

а можно сделать несколько блоков на 1 странице?

@design_scripts 3 жыл бұрын

можно: yadi.sk/i/kV6B8ZYBYwFqcA

@thesacrifice18 3 жыл бұрын

Убрал частицы, из за них мобильная версия грузиться больше минуты. Ограничивал экран только на десктоп, та же фигня

@design_scripts 3 жыл бұрын

Это ж с тобой мы общались в вк? Для тех, у кого та же проблема - проверьте код. Трабл был в коде, который Касперский каким-то образом интегрировал в блок T123 (или в кодпен). Из-за него грузилась страница

@user-fk1dd1uz4e 3 жыл бұрын

@@design_scripts Доброго времени суток! Все замечательно работает. Спасибо большое. Но не поняла, что именно надо исправить в коде, чтобы загрузка на мобиле не была такой долгой. Ограничение на тильде только для десктопа не помогает.

@user-um4vf2vx9q 4 жыл бұрын

Работает этот эффект в мобильной Верси ?)

@design_scripts 3 жыл бұрын

Щас проверю xD

@design_scripts 3 жыл бұрын

Ещё как работает) Только, чтобы двигать частицы, нужно тапать на экран

@user-ow6vq9xs3e 2 жыл бұрын

@@design_scripts изменила размер зеро блока (добавила туда информацию) и в коде это тоже изменила и частицы в мобильной версии пропали, именно в мобильной. В чем может быть проблема?