Интегрируйте библиотеку ParticleJs в свою тему.

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

Как только плагин будет активирован, вы увидите новый пункт внутреннего меню под названием “Фон частиц”, как показано на скриншоте ниже.

Нажав на это, вы попадете на этот экран, где вы можете добавить свой код, который будет объяснен вкратце.

Теперь вы полностью готовы применить некоторые приятные фоновые эффекты к своему веб-сайту / странице. Давайте сначала найдем и настроим классный эффект из демонстрации particleJs здесь. Существует несколько конфигураций, с которыми вы можете поиграть и создать эффект в соответствии с вашими предпочтениями / потребностями. Все опции там понятны сами по себе, и вам нужно поиграть с этим и сгенерировать код. Несколько скриншотов, которые помогут вам найти варианты.

1) Экран по умолчанию в демонстрации Particle JS

2) Выберите понравившуюся вам предустановку

3) Играйте с опциями

4) Загрузите сгенерированный код

5) Скопируйте и вставьте код

Это json-код (не волнуйтесь, если вы знаете, что это такое), откройте загруженный файл в любом текстовом редакторе или ide, который у вас есть. Код будет выглядеть так, как показано на рисунке ниже. Просто выберите все сверху вниз и скопируйте его.

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

particlesJS('СВОЙ ИНДИФИКАТР',

ВСТАВЬТЕ СВОЙ КОД ЗДЕСЬ

);

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

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

Для пользователей Elementor:
Вы можете легко применить идентификатор к разделу из предварительной настройки раздела, как показано ниже

Вы можете заметить, что движущиеся частицы находятся над вашим контентом, в этом случае просто присвоите столбцу / строке содержимого значение “z-index: 5 (или более)”.