Анимированный фон на HTML5 Canvas! ► Particles JS 

Спасибо тебе огромное! На твоём сайте целый день зависаю, там сколько всего полезного)

достаточно было назвать библиотеку и видео можно заканчивать)

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

Красавчик, ничего не скажешь) Многому научился с твоих видео, хотя ещё есть куда расти. Спасибо огромное!))

хауди, можешь подсказать 1 вещь про канвас? с каждым фреймом он всегда полностью перерендеривает картинку или частями?

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

Ничего себе, на экране монитора сегодняшнее число и 13 часов дня, свежий урок

Такой эффект очень просто сделать и без библиотеки) Но видео понравилось, лайк заслужил))

ура. спасибо. давно искал эту анимацию, увидел у тебя на сайте вчера, как раз хотел спросить.

Спасибо. Очень атмосферное видео.

Гуру!))) Хочу так же магией овладеть!)))

блин,черт,нет серьезно он не может найти main.js путь верный,расширений в браузере вообще никаких нет,что делать?? думаю может дело в библиотеке jquery,там щас 3.1.1 или вы делаете на локалхосте,это обязательно? ответьте пожалуйста

Подскажите пожалуйста, как добавить фотку Vk и т.д, а когда наводишь был эффект и можно нажать и перейти ,!!! только чтобы добавить на эту анимацию по центру, а анимация осталась

Как сделать чтобы всплывали подсказки как у тебя? К примеру когда ты пишешь defer. Emmet у меня стоит

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

уважаемый Хауди ХО- так и не нашёл решение с проблемой подключения jQuery, перепробовал всё, нашёл только одни вопросы на сайтах. По делу - ничего типа орфографическая ошибка... jQuery is not defined at main.js:1

Как задать высоту фона (для отдельного блока), чтобы адаптивный был. Изменения высоты в css результата не дали. Спасибо.

спасибо! то что искал!!!

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

Подскажите пожалуйста не работает в интернет explorer , как запускать эту анимацию там?

Можно ли его использовать на wordpress? Если да, то как? Спасибо)

фига только себе на сайт начел ставить (вчера) а тут урок думаю теперь справлюсь.

А можешь скинуть полный исходник того что получилось

Нужно ещё границы фона задвинуть за границы монитора минимум на то расстояние в пикселях, которое равно расстоянию с которого между партиклами начинает образовываться линия. Тогда всё будет идеально

как там впихнуть свою svg картинку? По идее можно.

Подскажите почему не работает jQuery. Всё перепроверил на 10 раз, ошибок нет, но и не работает(((

Спасибо всё работает

Как Вы сделали хороший домен ???

а как цвет фона поменять с красного на белый?

Particles не появились на первом этапе. Просматриваю код страницы и там нету у меня

за 2 года тут появилось 120 коментов, из которых около половины о том, что не работает\выдает ошибки и тп. Единственный твой ответ - это благодарность человеку за похвалу сайта, о котором тут речи и не идет. Я то думал, тут толковый материал везде; А тебе два года пишут, решения так и нет. Может он и есть, но тут нигде нет добавленной ссылки на "ответ, 'что, да как, да почему' в этом видео"... Очень обидно. Честно говоря, наверное не буду дальше смотреть твои уроки, сравнил их с Гошей Дударем, там по информативнее будет. А ведь это бы не случилось, не будь тут такого "рукаво-спускания" Ведь идея пилить уроки с тематикой это отличная идея. Вот только ответов нет. Пусть если это не увидишь ты, увидит часть твоей аудитории и уйдет; ну или ты мог бы принять меры. Всяко работать ты вроде умеешь, что же тут такое бревно..

Спасибо! :))

Чувак лови лукас

все точки в файле main.js не подсвечиваются сиреневым как на видео.

Скажи,а можно как то этот фон подключить к CMS? К Joomla например,к шаблону какому-нибудь ?

Мне консоль ошибку пишет уже лишь потому что я сделал jQuery код как у тебя, первая же строчка ошибка

ахахахаха, ох уж эти времена где ты создавал по тысячи папок. :DD

Подскажите пожалуйста, как на сайте разместить 2 скрипта, чтобы они работали в разных блоках?

JQuery(document).ready(function() { /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ particlesJS.load('particles-js', 'media/assets/particles.json', function() { console.log('callback - particles.js config loaded'); }); }); У меня на файл main.js ругается, в частности на первую строчку вышеуказанного кода

ошибка Failed to load resource: net::ERR_FILE_NOT_FOUND, что делать???

В написаном файле main.js в редакторе Brackets пишет 5 шибок...8 раз повторял этот урок...не работает...

krasava haudi ho drugan a u tebya test facebook +?

Можно было хотя бы одну ссылку оставить на сайт?

Как называется плагин который находится в правом верхнем углу позволяющий перемещаться по написанному коду (Ну по сути это весь наш написанный код, только в маленьком масштабе)

подскажите пожалуйста как сделать, что бы партикалс двигался под контентом (текстом или под png)?

А ссылка на твой ассет можно? У тебя нельзя скопировать его.

Зделай видеоролик по "Учим PHP За 1 час!"Буду очень блогодарен если запишешь!

спасибо, видео очень помогло, не знал как canvas на бг перенести и зафиксировать :P

Что б это все заработало нужно сайтик запустить на сервере (сойдет даже Live server что в VS Code). Возможно в видео об этом была оговорка, но я пропустил. Без сервера НЕ РАБОТАЕТ! И спасибо за видео :)

как называется редактор в котором пишешь????

Привет! Делаешь сайты на заказ?

Класс)

То есть видео не о том как самостоятельно создать двигающиеся частицы, а о том как подключить её? xD

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

Всем привет у меня возникла ошибка и я не понимаю в чем проблема в бравзере пишет что ошибка в файле main.js запустил в ide и в файле main.js выводит ошибку в первой строке jQuery(document) ready(function() {

Хоть кто то есть , кто посмотрев его видео или что то подобное стал сам делать сайты и на этом зарабатывать??!!

ребят если у вас не работает то просто скопируйте 2 файла в папку(particles.min.js,app.js) и просто подключите.

в чом функциональное назначение летающих казявок?.лишние скрипты?

Хороший пример и эффект хороший. Буквально неделю назад ставил на свой сайт - не все так однозначно и просто, но в опытных руках ставится и кастомизируется хорошо. Тем у кого не заработало - советую внимательно смотреть примеры и исходники на сайте автора - vincentgarreau.com

JQuery(document).ready(function() { Первая строка не правильная как ее исправить?

Здравствуйте! Подскажите пожалуйста, возможно сделать всё тоже самое за исключением молекул "точек", а вместо них выводить например монетку иконку? )

Всем привет! Я использую bootstrap, а именно navbar. Когда я пытаюсь перейти по ссылке из navbar ничего не происходит, т.к. нажимается не навбар, а на particles-js. Я хочу сохранить весь внешний вид, который у меня сейчас, но чтобы navbaar функционировал. Код ниже... Заранее сасибо!

Сайт ну очень крутой))))))!!!!!!

Скажи пожалуйста как ты интро делаешь?

Лойс)

зделай урок по c# за 1час!!!

canvas у тебя еще какой то там

Крутой анимированный фон. Жаль не работает...

Ребят, уберите атрибут defer и будет работать

Ничего не выходит . Переписал все раз 10 и так же пересмотрел видео и ничего не выходит((

как же плохо выглядел клондайк программиста раньше

page рэпер =))))

Что значит "деферим"?

Привет из 2022

А что за музыка на 13:31 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VZS_sB1sBaA.htmlm31s

спасибо мистер Гавняшка

how t put it in wordpress verry hard no one explaine good

Plexus)

давай дино уже кинчай!

у кого то есть рабочий исходник именно с этого видео?

Салют мастеру! :) Ты у себя на сайте пишешь, что можно создать КОСМОС...Как это сделать? :)

как убрать фпс в левом верхним углу ?

windows resizer еще

а что это за редактор?

А что за редактор?

блин 3 раз всё переделываю не могу понять в чём ошибка. *Может кто скинет?*

Я из 2021

блин часа 2 мучаюсь,не работает

yest*

Хауди Хо, ты ведь бурят правильно?) Прошу прощения за такой вопрос)

Посмотрите разбор квизов. Автор по полочкам всё разложил: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-X7cipTWFwJ4.html

leo.cheron.works/ как он это сделал? вродеж канвас... ? но что за либа? гугл не дал результата.... не встречал.?

Короче для тех у кого не работает файл надо запускать на хостинге.

Не работает

Не-а, чёт не робит.

помедленней плез

Почему у хауди на аватарке какашка с лицом ?

😎😑🤔💂😄😄

хрень . слишком дорого все

Тем кто пишет, что у них не получается : перейдите по данной ссылке codepen.io/pen/? и просто скопируйте код и вставить себе и все будет замечательно работать. и не забудьте конечно подключить модуль для particle