Украсить сайт к Новому году можно двумя яркими эффектами: мигающей гирляндой сверху экрана и танцующим Дедом Морозом в углу. Оба скрипта работают вместе, не требуют плагинов и не тормозят сайт. Как установить

1.  Скопируйте код кнопкой выше
2. Откройте файл footer.php вашей темы
3. Вставьте код перед закрывающим тегом
4. Сохраните файл
5. Очистите кеш сайта

Где можно использовать

• Интернет-магазины — создать праздничную атмосферу
• Блоги — удивить читателей
• Корпоративные сайты — поздравить клиентов
• Корпоративные сайты — поздравить клиентов
• Лендинги — повысить конверсию в новогодние праздники
• Портфолио — показать, что вы любите детали

Часто задаваемые вопросы

Можно ли поставить только гирлянду, без Деда Мороза? Да. В коде есть две секции — гирлянда и дед. Удалите одну из них, оставьте нужную.

Можно ли менять цвета лампочек? Да. В коде есть массив COLORS — замените значения на свои в формате ‘#RRGGBB’.

Дед Мороз будет мешать читать текст? Нет. Он в правом нижнем углу, размер небольшой, полупрозрачный. И его можно отключить.

Будет ли тормозить сайт? Нет. Скрипт использует canvas и requestAnimationFrame. Нагрузка минимальная.

Работает ли на мобильных? Да. Гирлянда растягивается на всю ширину, Дед Мороз уменьшается и остаётся в углу.

Можно ли поставить только на одну страницу? Да. Вставьте код не в footer.php, а в контент нужной страницы через блок «Произвольный HTML»

Как убрать гирлянду и Деда Мороза? Удалите код из записи или из footer.php. Всё исчезнет сразу.

  Код скрипта:

/*
 * Гирлянда + танцующий Дед Мороз
 * Автор: Ведерников Сергей
 * ИИ:    Дэп — https://1promtai.ru/
 */
(function() {
  'use strict';
  if (window.__garlandRunning) return;
  window.__garlandRunning = true;

  var COLORS = ['#ff3b3b', '#ffd93b', '#4ade80', '#3bb0ff', '#c084fc', '#fb923c'];
  var GREETING = '\uD83C\uDF84 \u0421 \u041D\u043E\u0432\u044B\u043C \u0433\u043E\u0434\u043E\u043C! \uD83C\uDF84';

  function init() {
    // ============ ГИРЛЯНДА ============
    var bulbCount = Math.max(12, Math.floor(window.innerWidth / 55));
    var wireHeight = 30;
    var bulbSize = 14;
    var canvasHeight = wireHeight + bulbSize * 2 + 20;

    var gCanvas = document.createElement('canvas');
    gCanvas.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:' + canvasHeight + 'px;pointer-events:none;z-index:9997;';
    gCanvas.setAttribute('aria-hidden', 'true');
    document.body.appendChild(gCanvas);

    var gctx = gCanvas.getContext('2d');
    var bulbs = [];

    function layoutGarland() {
      var W = window.innerWidth;
      var dpr = Math.min(window.devicePixelRatio || 1, 2);
      gCanvas.width = W * dpr;
      gCanvas.height = canvasHeight * dpr;
      gctx.setTransform(dpr, 0, 0, dpr, 0, 0);

      bulbCount = Math.max(12, Math.floor(W / 55));
      bulbs = [];
      for (var i = 0; i < bulbCount; i++) {
        bulbs.push({
          x: (i + 0.5) * (W / bulbCount),
          color: COLORS[i % COLORS.length],
          phase: Math.random() * Math.PI * 2,
          speed: 0.02 + Math.random() * 0.02
        });
      }
    }
    layoutGarland();

    var garlandResizeTimer;
    window.addEventListener('resize', function() {
      clearTimeout(garlandResizeTimer);
      garlandResizeTimer = setTimeout(layoutGarland, 200);
    });

    function drawWire() {
      var W = window.innerWidth;
      gctx.beginPath();
      gctx.moveTo(0, wireHeight / 2);
      var segments = Math.max(30, Math.floor(W / 15));
      for (var i = 0; i <= segments; i++) {
        var x = (W / segments) * i;
        var y = wireHeight / 2 + Math.sin(x * 0.015) * 6;
        gctx.lineTo(x, y);
      }
      gctx.strokeStyle = '#2a2a2a';
      gctx.lineWidth = 2;
      gctx.lineCap = 'round';
      gctx.stroke();
    }

    function drawBulb(b, t) {
      var x = b.x;
      var y = wireHeight / 2 + Math.sin(x * 0.015) * 6;
      var pulse = 0.55 + 0.45 * (0.5 + 0.5 * Math.sin(t * b.speed + b.phase));
      var r = bulbSize * 0.5;

      // свечение
      gctx.beginPath();
      gctx.arc(x, y + r + 4, r * 2.2, 0, Math.PI * 2);
      var grad = gctx.createRadialGradient(x, y + r + 4, 0, x, y + r + 4, r * 2.2);
      grad.addColorStop(0, hexToRgba(b.color, 0.55 * pulse));
      grad.addColorStop(1, hexToRgba(b.color, 0));
      gctx.fillStyle = grad;
      gctx.fill();

      // колба
      gctx.beginPath();
      gctx.arc(x, y + r + 4, r, 0, Math.PI * 2);
      gctx.fillStyle = b.color;
      gctx.globalAlpha = 0.35 + 0.65 * pulse;
      gctx.fill();
      gctx.globalAlpha = 1;

      // блик
      gctx.beginPath();
      gctx.arc(x - r * 0.3, y + r + 4 - r * 0.35, r * 0.35, 0, Math.PI * 2);
      gctx.fillStyle = 'rgba(255,255,255,' + (0.7 * pulse) + ')';
      gctx.fill();
    }

    function hexToRgba(hex, a) {
      var h = hex.replace('#', '');
      if (h.length === 3) h = h.split('').map(function(c){return c+c;}).join('');
      var r = parseInt(h.substr(0, 2), 16);
      var g = parseInt(h.substr(2, 2), 16);
      var b = parseInt(h.substr(4, 2), 16);
      return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    }

    // ============ ДЕД МОРОЗ ============
    var dCanvas = document.createElement('canvas');
    var dSize = 140;
    dCanvas.width = dSize;
    dCanvas.height = dSize * 1.6;
    dCanvas.style.cssText = [
      'position:fixed',
      'bottom:16px',
      'right:16px',
      'width:' + dSize + 'px',
      'height:' + (dSize * 1.6) + 'px',
      'pointer-events:none',
      'z-index:9997'
    ].join(';');
    dCanvas.setAttribute('aria-hidden', 'true');
    document.body.appendChild(dCanvas);

    var dctx = dCanvas.getContext('2d');

    function drawSanta(t) {
      var W = dCanvas.width;
      var H = dCanvas.height;
      dctx.clearRect(0, 0, W, H);

      var cx = W / 2;
      var bob = Math.sin(t * 0.002) * 4;
      var tilt = Math.sin(t * 0.0025) * 0.06;
      var wave = Math.sin(t * 0.005) * 0.5;

      dctx.save();
      dctx.translate(cx, H * 0.9 + bob);
      dctx.rotate(tilt);

      // тень
      dctx.beginPath();
      dctx.ellipse(0, 4, 46, 8, 0, 0, Math.PI * 2);
      dctx.fillStyle = 'rgba(0,0,0,0.18)';
      dctx.fill();

      // тело (шуба)
      dctx.beginPath();
      dctx.moveTo(-40, 0);
      dctx.quadraticCurveTo(-44, -80, -20, -110);
      dctx.lineTo(20, -110);
      dctx.quadraticCurveTo(44, -80, 40, 0);
      dctx.closePath();
      dctx.fillStyle = '#c81d1d';
      dctx.fill();

      // мех на шубе
      dctx.beginPath();
      dctx.moveTo(-40, 0);
      dctx.quadraticCurveTo(0, -12, 40, 0);
      dctx.lineTo(40, -8);
      dctx.quadraticCurveTo(0, -20, -40, -8);
      dctx.closePath();
      dctx.fillStyle = '#ffffff';
      dctx.fill();

      // пуговицы
      dctx.fillStyle = '#ffffff';
      dctx.beginPath(); dctx.arc(0, -55, 3, 0, Math.PI * 2); dctx.fill();
      dctx.beginPath(); dctx.arc(0, -35, 3, 0, Math.PI * 2); dctx.fill();

      // левая рука (машет)
      dctx.save();
      dctx.translate(-34, -75);
      dctx.rotate(-0.6 + wave);
      dctx.beginPath();
      dctx.moveTo(0, 0);
      dctx.quadraticCurveTo(-14, 12, -6, 26);
      dctx.lineWidth = 12;
      dctx.strokeStyle = '#c81d1d';
      dctx.lineCap = 'round';
      dctx.stroke();
      // варежка
      dctx.beginPath();
      dctx.arc(-6, 28, 8, 0, Math.PI * 2);
      dctx.fillStyle = '#ffffff';
      dctx.fill();
      dctx.restore();

      // правая рука
      dctx.save();
      dctx.translate(34, -75);
      dctx.rotate(0.5);
      dctx.beginPath();
      dctx.moveTo(0, 0);
      dctx.quadraticCurveTo(14, 12, 6, 26);
      dctx.lineWidth = 12;
      dctx.strokeStyle = '#c81d1d';
      dctx.lineCap = 'round';
      dctx.stroke();
      dctx.beginPath();
      dctx.arc(6, 28, 8, 0, Math.PI * 2);
      dctx.fillStyle = '#ffffff';
      dctx.fill();
      dctx.restore();

      // мешок
      dctx.beginPath();
      dctx.ellipse(46, -10, 22, 26, 0.2, 0, Math.PI * 2);
      dctx.fillStyle = '#7a4b1f';
      dctx.fill();
      dctx.beginPath();
      dctx.arc(46, -32, 8, 0, Math.PI * 2);
      dctx.fillStyle = '#c81d1d';
      dctx.fill();

      // голова
      dctx.beginPath();
      dctx.arc(0, -128, 22, 0, Math.PI * 2);
      dctx.fillStyle = '#ffd9b3';
      dctx.fill();

      // борода
      dctx.beginPath();
      dctx.moveTo(-18, -118);
      dctx.quadraticCurveTo(-22, -80, 0, -76);
      dctx.quadraticCurveTo(22, -80, 18, -118);
      dctx.quadraticCurveTo(0, -110, -18, -118);
      dctx.fillStyle = '#ffffff';
      dctx.fill();

      // усы
      dctx.beginPath();
      dctx.ellipse(-7, -124, 7, 4, 0, 0, Math.PI * 2);
      dctx.ellipse(7, -124, 7, 4, 0, 0, Math.PI * 2);
      dctx.fillStyle = '#ffffff';
      dctx.fill();

      // глаза
      dctx.fillStyle = '#1a1a1a';
      dctx.beginPath(); dctx.arc(-7, -134, 2.2, 0, Math.PI * 2); dctx.fill();
      dctx.beginPath(); dctx.arc(7, -134, 2.2, 0, Math.PI * 2); dctx.fill();

      // щёки
      dctx.fillStyle = 'rgba(255,120,120,0.45)';
      dctx.beginPath(); dctx.arc(-12, -128, 4, 0, Math.PI * 2); dctx.fill();
      dctx.beginPath(); dctx.arc(12, -128, 4, 0, Math.PI * 2); dctx.fill();

      // шапка
      dctx.beginPath();
      dctx.moveTo(-22, -142);
      dctx.quadraticCurveTo(0, -172, 22, -142);
      dctx.closePath();
      dctx.fillStyle = '#c81d1d';
      dctx.fill();

      // помпон
      dctx.beginPath();
      dctx.arc(0, -168, 8, 0, Math.PI * 2);
      dctx.fillStyle = '#ffffff';
      dctx.fill();

      // опушка шапки
      dctx.beginPath();
      dctx.ellipse(0, -142, 24, 6, 0, 0, Math.PI * 2);
      dctx.fillStyle = '#ffffff';
      dctx.fill();

      dctx.restore();
    }

    // ============ АНИМАЦИЯ ============
    var start = performance.now();
    function animate(now) {
      var t = now - start;

      // гирлянда
      gctx.clearRect(0, 0, gCanvas.width, gCanvas.height);
      drawWire();
      for (var i = 0; i < bulbs.length; i++) drawBulb(bulbs[i], t);

      // дед мороз
      drawSanta(t);

      requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();

  Возможно будут ещё скрипты, воспользуйтесь поиском на сайте: 🎅 Дед Мороз по экрану ❄️ Снег на сайт ⏰ Таймер до Нового года 🌧️ Дождь на сайт ⭐ Звёзды на фон 🎆 Салют по клику 📜 Кнопка «наверх» 🌙 Тёмная тема для сайта 🍪 Уведомление о cookie 📊 Прогресс-бар чтения 🎯 Кнопка «поделиться» 💬 Чат для сайта 🖼️ Галерея с лайтбоксом 🔍 Живой поиск 📱 PWA для сайта ⚡ Оптимизация скорости