Если нужно оформить снегом только главный баннер (Hero Section) или промо-блок, а не весь сайт целиком, оптимально использовать чистый CSS с аппаратным ускорением GPU. Эффект создается через псевдоэлементы с бесшовными градиентами снежинок и не требует подключения скриптов.
1 Назначение суффикса класса секции
Открой страницу в редакторе Gridbox, перейди в настройки нужной Секции (Section) и в поле Class Suffix добавь класс:
Class Suffix
snow-falling2 Добавление стилей анимации (CSS)
Вставь в Инструменты ➝ Редактор кода ➝ CSS:
CSS
/* Контейнер секции с падающим снегом */.snow-falling { position: relative; overflow: hidden;}/* Первый (быстрый) слой снежинок */.snow-falling::before,.snow-falling::after { content: ""; position: absolute; top: -100%; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 2; background-image: radial-gradient(4px 4px at 25px 30px, #ffffff, rgba(0,0,0,0)), radial-gradient(3px 3px at 60px 85px, rgba(255,255,255,0.9), rgba(0,0,0,0)), radial-gradient(5px 5px at 110px 45px, rgba(255,255,255,0.8), rgba(0,0,0,0)), radial-gradient(3.5px 3.5px at 180px 140px, #ffffff, rgba(0,0,0,0)); background-size: 240px 240px; animation: snowFallAnimation 10s linear infinite; will-change: transform;}/* Второй (медленный фоновый) слой с параллакс-эффектом */.snow-falling::after { background-size: 360px 360px; animation-duration: 18s; opacity: 0.6;}/* Плавное бесконечное падение */@keyframes snowFallAnimation { 0% { transform: translateY(0); } 100% { transform: translateY(100%); }}Обрати внимание:
Если в секции используются кнопки, ссылки или формы, убедись, что контент внутри колонок имеет свойство z-index: 3 (или относительно позиционирован), чтобы слои снега оставались фоновым декоративным элементом.