Хотите добавить на свой сайт немного магии и повысить конверсию? Геймификация — отличный способ удержать внимание пользователя. В этом уроке мы создадим красивый, объемный залп конфетти, который будет автоматически срабатывать, когда посетитель доскроллит до специального предложения, важной кнопки или формы подписки.

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

Главные фишки нашего скрипта:

• Умная загрузка: Скрипт не работает вхолостую. Библиотека подгружается только если на странице есть нужный элемент.
• Срабатывание по скроллу: Используется современный IntersectionObserver — конфетти выстрелит ровно в тот момент, когда блок появится на экране.
• Отвязка от скролла: Конфетти привязаны к экрану и не будут "уезжать" вверх, если пользователь продолжит крутить колесико мыши.
• Полная кастомизация: Вы можете настроить всё: от размера бумажек и их цвета до гравитации и угла запуска.

Шаг 1. Куда вставлять код?

Самый безопасный способ добавлять кастомный PHP-код в WordPress — использовать бесплатный плагин Code Snippets (или WPCode).

1. Установите и активируйте плагин Code Snippets.
2. Перейдите во вкладку Сниппеты -> Добавить новый.
3. Дайте ему понятное название, например: «Анимация конфетти для спецпредложений».
4. Вставьте код из Шага 2 в главное окно.
5. Выберите настройку «Запускать везде» или «Только на сайте» (front-end) и нажмите «Сохранить и активировать».

(Альтернативный вариант: вставить код в файл functions.php вашей дочерней темы).

Шаг 2. Код сниппета

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

add_action('wp_footer', 'specialoffer_confetti_final_snippet');
function specialoffer_confetti_final_snippet() {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        // ==========================================
        // ⚙️ НАСТРОЙКИ КОНФЕТТИ (МЕНЯТЬ ЗДЕСЬ)
        // ==========================================
        var CONFETTI_CONFIG = {
            angle: 90,          // УГОЛ ЗАПУСКА: 90 - вверх, 0 - вправо, 180 - влево, 270 - вниз.
            ticks: 300,         // ВРЕМЯ ЖИЗНИ: 150 - быстро исчезают, 300 - стандарт, 600 - долго падают.
            particleCount: 80,  // ПЛОТНОСТЬ: количество частиц за 1 залп.
            scalar: 0.7,        // МАСШТАБ: 1.0 - стандарт, 0.5 - мелкие, 1.5 - крупные.
            power: 0.4,         // СИЛА РАЗЛЕТА: 1.0 - стандарт, 1.5 - далеко, 0.4 - аккуратно вокруг блока.
            spread: 360,        // УГОЛ РАССЕИВАНИЯ: от 10 (узкая струя) до 360 (круглый взрыв).
            zIndex: 100000,     // Поверх всех элементов сайта.
            repeats: 1,         // СЕРИЯ ЗАЛПОВ: 1 - один взрыв, 2 и более - серия.
            repeatDelay: 300,   // Задержка между залпами в серии (в миллисекундах).
            colors: ['#FFC107', '#2196F3', '#FF5722', '#4CAF50', '#E91E63', '#9C27B0'] // Цвета частиц
        };
        // ==========================================

        var selectors = '.specialoffer';
        var elements = document.querySelectorAll(selectors);
        if (elements.length === 0) return;

        var canvas = document.createElement('canvas');
        canvas.id = 'confetti-fixed-canvas';
        canvas.style.position = 'fixed';
        canvas.style.top = '0';
        canvas.style.left = '0';
        canvas.style.width = '100vw';
        canvas.style.height = '100vh';
        canvas.style.pointerEvents = 'none'; 
        canvas.style.zIndex = CONFETTI_CONFIG.zIndex;
        document.body.appendChild(canvas);

        var script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js';
        document.head.appendChild(script);

        script.onload = function() {
            var myConfetti = confetti.create(canvas, { resize: true });
            var observerOptions = { root: null, threshold: 0.15 };

            var observer = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        var rect = entry.target.getBoundingClientRect();
                        var x = (rect.left + (rect.width / 2)) / window.innerWidth;
                        var y = (rect.top + (rect.height / 2)) / window.innerHeight;

                        fireStylishConfetti(myConfetti, x, y);
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            elements.forEach(function(el) { observer.observe(el); });
        };

        function fireStylishConfetti(instance, x, y) {
            var cfg = CONFETTI_CONFIG;
            var defaults = { origin: { x: x, y: y }, colors: cfg.colors, angle: cfg.angle, ticks: cfg.ticks };

            function fireLayer(ratio, opts) {
                var s = opts.scalar ? (opts.scalar * cfg.scalar) : cfg.scalar;
                var v = opts.startVelocity ? (opts.startVelocity * cfg.power) : (45 * cfg.power);
                instance(Object.assign({}, defaults, opts, {
                    particleCount: Math.floor(cfg.particleCount * ratio),
                    scalar: s,
                    startVelocity: v,
                    spread: opts.spread ? opts.spread : cfg.spread
                }));
            }

            var currentRepeat = 0;
            function doBurst() {
                fireLayer(0.35, { startVelocity: 35, spread: cfg.spread * 0.5, scalar: 0.8 }); 
                fireLayer(0.25, { startVelocity: 45, spread: cfg.spread });                    
                fireLayer(0.20, { startVelocity: 55, spread: cfg.spread * 1.2, decay: 0.92 });  
                fireLayer(0.20, { startVelocity: 25, spread: cfg.spread * 0.8, scalar: 1.3 }); 

                currentRepeat++;
                if (currentRepeat < cfg.repeats) {
                    setTimeout(doBurst, cfg.repeatDelay);
                }
            }
            doBurst();
        }
    });
    </script>
    <?php
}

Шаг 3. Как запустить анимацию на сайте?

Скрипт настроен так, что он автоматически ищет на странице элементы с CSS-классом specialoffer.

Всё, что вам нужно сделать:

1. Откройте нужную страницу в редакторе (Gutenberg, Elementor, Divi и т.д.).
2. Выделите блок, изображение, кнопку или колонку, из которой должно вылететь конфетти.
3. В настройках блока найдите поле «Дополнительные классы CSS» (Advanced -> CSS Classes).
4. Напишите там слово: specialoffer (без точки в начале).
5. Сохраните страницу.

Готово! Теперь, как только пользователь прокрутит страницу до этого блока, вокруг него взорвется красивое конфетти. Скрипт сам высчитывает размеры вашего блока, поэтому салют вылетит идеально из центра, будь то маленькая кнопка или огромный баннер на пол-экрана.