Setup
Info
Info
Включено в подписку
Скопировано!
Поделиться
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
URL скопирован в буфер обмена!
Lightswind UI
- Открываем Zero Block и заходим в режим редактирования.
- В редакторе Zero Block размещаем HTML элемент и вставляем в него подготовленный код.
- В коде пропишите желаемые цвета для эффекта и количество частиц.
Теги
Модификация
#
CSS
#
Эффекты
#
<div id="js-particles" style="position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const colors = ['#ff223e', '#5d1eb2', '#ff7300']; /* Пропишите цвета для эффекта */
const size = 3; /* Если добавили цвета больше 3 штук, укажите необходимое количетво */
function getParticleCount() {
const w = window.innerWidth;
if (w > 1024) return 60;
if (w > 768) return 50;
return 40;
}
particlesJS("js-particles", {
particles: {
number: { value: getParticleCount() },
color: { value: colors },
shape: { type: "circle" },
opacity: { value: 1 },
size: { value: size, random: true },
line_linked: { enable: false },
move: {
enable: true,
speed: 2,
direction: "none",
random: true,
straight: false,
out_mode: "out"
}
},
interactivity: {
detect_on: "canvas",
events: { onhover: { enable: false }, onclick: { enable: false }, resize: true }
},
retina_detect: true
});
});
</script>
<style>
#js-particles canvas {
position: absolute;
width: 100%;
height: 100%;
}
.particles-js-canvas-el circle {
fill: currentColor;
filter: url(#glow);
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="3.5" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
</svg>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const colors = ['#ff223e', '#5d1eb2', '#ff7300']; /* Пропишите цвета для эффекта */
const size = 3; /* Если добавили цвета больше 3 штук, укажите необходимое количетво */
function getParticleCount() {
const w = window.innerWidth;
if (w > 1024) return 60;
if (w > 768) return 50;
return 40;
}
particlesJS("js-particles", {
particles: {
number: { value: getParticleCount() },
color: { value: colors },
shape: { type: "circle" },
opacity: { value: 1 },
size: { value: size, random: true },
line_linked: { enable: false },
move: {
enable: true,
speed: 2,
direction: "none",
random: true,
straight: false,
out_mode: "out"
}
},
interactivity: {
detect_on: "canvas",
events: { onhover: { enable: false }, onclick: { enable: false }, resize: true }
},
retina_detect: true
});
});
</script>
<style>
#js-particles canvas {
position: absolute;
width: 100%;
height: 100%;
}
.particles-js-canvas-el circle {
fill: currentColor;
filter: url(#glow);
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="3.5" result="coloredBlur" />
<feMerge>
<feMergeNode in="coloredBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
</svg>
Модификация позволяет создать свой анимированный эффект частиц.
Анимация фона частиц
Настройка модификации
не доступно
id:
Базовые настройки
- Размер и позиционирование контейнера:
(растягивает частицы на весь блок и не мешает кликам по контенту)
- Количество частиц:
(автоматически адаптируется под ширину окна)
- Цвета частиц:
(можно менять палитру под стиль сайта; если цветов больше, увеличь значение size)
- Размер частиц:
(меняй для визуального баланса — чем меньше число, тем больше плотность эффекта)
- Тип частиц:
(можно заменить на “edge”, “triangle”, “polygon”, “star” и т.д.)
- Анимация движения:
(контролирует плавность и направление движения)
- Glow-эффект:
(создаёт мягкое свечение вокруг точек)
Технические советы
- Библиотека particles.js подключается через CDN:
(убедись, что скрипт загружается до инициализации кода)
- Для корректного отображения glow-фильтра убедись, что блок не перекрыт другими canvas с прозрачностью.
- Чтобы частицы не перекрывали контент, обязательно оставь pointer-events: none; и z-index: 0.
- При добавлении поверх текста или кнопок используй родительский блок с position: relative; — тогда #js-particles будет работать как фон.
- Если на странице есть свайпы (например, на мобильных), не делай перезагрузку canvas при свайпе, иначе скорость анимации может измениться.
- Для плавной производительности желательно не превышать 100 частиц и не использовать слишком яркие цвета с сильным blur.
Подключение скриптов
Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().
Информация о кастомизации кода доступна только в веб-версии сайта.
Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!