Как добавить падающие снежинки на свой сайт?
Статья на ЯндексДзен, подписывайтесь!
Всем привет друзья!
В преддверии Нового года мне захотелось немного украсить свой сайт и добавить на падающие снежинки. Писать свой код было бы долго, поэтому я принялся искать подходящую библиотеку и мой взор пал на particles.js, его мы сегодня с вами и подключим на наш сайт.
Подключение библиотеки
Есть несколько вариантов подключить библиотеку particles.js
1. Заходим на официальный сайт, жмём кнопку download. В скаченном архиве нас интересует файл particles.min.js, его нам и нужно будет подключить к нашему сайту.
Если вы совсем новичок у меня есть несколько инструкций на эту тему:
– Как подключить JS файл к html документу
– Как подключить JS файл к сайту WordPress
2. Далее нам нужно сконфигурировать JSON с настройками библиотеки. На официальном сайте так же можно поиграться с настройками, если справа сверху пресет Default сменить на Snow, мы уже увидим падающие снежинки, останется только настроить их под себя и снизу нажать → Download current config (json)
Ссылка на мой пресет
3. Теперь нужно загрузить JSON на хостинг или закинуть в папку на компьютере, если вы настраивайте локальный проект. Я создал папку particles и разместил оба файла в ней для удобства.
4. Теперь нужно создать блок (div), в котором и будут падать снежинки. Я добавил его сразу после открытия тэга и указываем ему id, по которому будем к нему обращаться, в моём случаи это particles-js.
5. Наконец можно приступать к инициализации библиотеки, для этого я создал еще один файл с названием snow-init.js всё в той же папке particles, куда мы ранее загружали файлы. Вы можете сделать это и в своём основном файле.
Первым параметром передаем id нашего блока, а вторым ссылку на JSON файл, я делал это на сайте WordPress, поэтому путь у меня такой.
6. После чего обновляем страницу и смотрим изменения. Вы должны уже увидеть падающие снежинки, но скорее всего немного поедет верстка, ведь сам блок мы не стилизовали и он просто добавился сверху.
Поэтому нужно будет поработать немного с CSS, заходим в ваш файл стилей и задаем необходимые свойства блоку particles-js
Подключение на WordPress
По сколько я подключал библиотеку на сайте, который использует CMS WordPress, я решил сразу прописать условие, что наш скрипт будет подключаться только в ноябре, декабре, январе и феврале автоматически.
Если вы не знаете как правильно подключать JS файлы к WordPress, у меня есть небольшая статья на эту тему.
На этом все, если у вас остались вопросы – задавайте их в комментариях, я обязательно на них отвечу!
#снежинки #как добавить снег на сайт #particles.js
