Setup
Info
Info
Настройки
[
Написать в поддержку
Telegram: @sonneto_support
Кастомизация
]
URL скопирован в буфер обмена!
Particle motion
- Открываем 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:
Базовые настройки
- Эффект создаётся на элементе <canvas id="orbit">, который растягивается на весь экран.
- Размер и позиционирование → position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; (частицы находятся на заднем плане и не мешают кликам по контенту)
- Количество частиц → 300 для десктопа, 180 для планшета, 100 для мобильных устройств (автоматически подстраивается под ширину экрана)
- Размер частиц → от 0.5 до 2 пикселей (на мобильных чуть крупнее для видимости)
- Скорость движения → от 0.001 до 0.003 (регулирует плавность вращения вокруг центра)
- Радиус орбиты → Math.random() * (w / 3) + 50; (определяет расстояние частиц от центра; адаптируется под размер экрана)
- Фон → background: radial-gradient(circle at center, #050508 0%, #000000 100%); (даёт глубокий тёмный фон с эффектом глубины)
- Фильтры → filter: brightness(1.5); и mix-blend-mode: screen; (усиливают свечение и делают светящиеся точки мягче)
Технические советы
- Эффект основан на canvas-анимации и не требует библиотек. Работает через requestAnimationFrame с высокой производительностью.
- При изменении размеров окна частицы не пересоздаются — это сохраняет стабильность и плавность эффекта.
- Для интерактива используется позиция курсора (mousemove), но только на устройствах шире 768px, чтобы не перегружать мобильные.
- Параметр blur задаёт свечение: 6 для мобильных, 8 для десктопа — можно регулировать для большей чёткости или мягкости.
- Если эффект используется как фоновый слой, желательно поместить canvas внутри контейнера с position: relative;, чтобы корректно отображался под текстом или элементами.
- Частицы лучше оставлять в диапазоне 100–300 шт., иначе при большем количестве может снижаться FPS на слабых устройствах.
- Для светлых дизайнов можно поменять фон на тёмно-серый градиент и скорректировать палитру частиц под более холодные тона.
Подключение скриптов
Для корректной работы модификации необходимо, чтобы на странице была подключена библиотека jQuery, так как скрипт использует $(document).ready() и .each().
Информация о кастомизации кода доступна только в веб-версии сайта.
Сделать это можно в разделе: Настройки сайта - Ещё - Подключить jQuery на страницах сайта.
В Zero Block скрипты рекомендуется вставлять только после полной загрузки контента страницы, чтобы все элементы блока были доступны для обработки.
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!