2027 — год Красной Огненной Козы. По восточному календарю это символ доброты, творчества и гармонии. Огонь добавляет ей энергии и страсти.

Добавьте на сайт живую анимацию: коза выходит, поздравляет с Новым годом и уходит. Всё нарисовано кодом — без картинок, без плагинов, без загрузки лишних файлов.

Ниже — живой пример, код и инструкция по установке.

Что делает скрипт

• Рисует красную козу — символ 2027 года
• Коза выходит слева, останавливается по центру
• Показывает плакат «С Новым 2027 годом!»
• Машет копытцем, кланяется, подпрыгивает
• Уходит вправо и исчезает
• Анимация запускается один раз при загрузке страницы
• Работает на телефонах, планшетах, компьютерах
• Не мешает кликам по сайту
• Не требует плагинов и сторонних библиотек

Немного о символе года

Год Красной Огненной Козы (или Овцы, или Барана — в китайской традиции это одно животное) официально начнётся 6 февраля 2027 года и закончится 25 января 2028 года.

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

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

Как установить

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

Если не хотите лезть в код темы — вставьте через кнопку ▶ RUN прямо в запись. Тогда коза появится только на этой странице.

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

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

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

Коза будет мешать читать текст?
Нет. Она появляется внизу экрана на 6 секунд и уходит. После этого ресурсы не тратятся. Если не нравится — код можно удалить.

Можно ли поменять текст поздравления?
Да. В коде есть переменная GREETING — замените текст на свой.

Можно ли поменять цвет козы?
Да. В коде тело козы нарисовано с двумя оттенками красного. Замените цвета на свои — например, на золотой или оранжевый.

Будет ли тормозить сайт?
Нет. Анимация длится 7 секунд, потом полностью останавливается. Дальше ресурсы браузера не расходуются.

Коза появляется каждый раз при загрузке?
Да. Если хотите, чтобы она показывалась один раз в день — можно добавить проверку через localStorage.

Работает ли на мобильных?
Да. Коза адаптируется под размер экрана — на телефоне будет меньше, но останется читаемой.

Можно ли поставить козу на все страницы сайта?
Да. Вставьте код не через ▶ RUN в запись, а в footer.php темы. Тогда коза будет появляться на всех страницах.

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

Что можно докрутить

Если базовая версия понравилась — можно добавить:

• Искры и огоньки вокруг козы — символ стихии Огня
• Несколько коз — целое стадо
• Коза с ёлкой в зубах
• Коза подпрыгивает и крутится
• Коза оставляет следы копыт
• Появление козы каждый час — для тех, кто долго на сайте

Все эти варианты — в следующих обновлениях. Следите за новыми скриптами.

Другие скрипты для сайта

Возможно будут ещё скрипты, воспользуйтесь поиском на сайте:

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

Итог

Красная Коза — символ 2027 года. Анимация добавляет сайту праздничное настроение и не требует ни плагинов, ни картинок. Всё нарисовано кодом, работает в любом браузере, адаптируется под любой экран.

Установите — и пусть год Козы принесёт удачу вашему сайту.

/*
 * Красная Коза — поздравление с Новым 2027 годом
 * Автор: Ведерников Сергей
 * ИИ:    Дэп — https://1promtai.ru/
 */
(function() {
  'use strict';
  if (window.__redGoatRunning) return;
  window.__redGoatRunning = true;

  var GREETING = '\u0421 \u041D\u043E\u0432\u044B\u043C 2027 \u0433\u043E\u0434\u043E\u043C!';

  function init() {
    var canvas = document.createElement('canvas');
    var W = window.innerWidth;
    var H = 260;
    canvas.width = W;
    canvas.height = H;
    canvas.style.cssText = [
      'position:fixed',
      'bottom:0',
      'left:0',
      'width:100%',
      'height:' + H + 'px',
      'pointer-events:none',
      'z-index:9997'
    ].join(';');
    canvas.setAttribute('aria-hidden', 'true');
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');
    var start = performance.now();

    var TOTAL = 7000;

    function drawGoat(x, y, scale, wave, phase) {
      ctx.save();
      ctx.translate(x, y);
      ctx.scale(scale, scale);

      // ==== НОГИ ====
      ctx.strokeStyle = '#8b1a1a';
      ctx.lineWidth = 8;
      ctx.lineCap = 'round';

      ctx.beginPath();
      ctx.moveTo(-30, 0);
      ctx.lineTo(-30, 40);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(-10, 0);
      ctx.lineTo(-10, 40);
      ctx.stroke();

      var legOffset = Math.sin(phase) * 3;
      ctx.beginPath();
      ctx.moveTo(30, 0);
      ctx.lineTo(30 + legOffset, 40);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(50, 0);
      ctx.lineTo(50 - legOffset, 40);
      ctx.stroke();

      ctx.fillStyle = '#1a1a1a';
      [-30, -10, 30 + legOffset, 50 - legOffset].forEach(function(lx) {
        ctx.beginPath();
        ctx.arc(lx, 40, 4, 0, Math.PI * 2);
        ctx.fill();
      });

      // ==== ТЕЛО ====
      ctx.beginPath();
      ctx.ellipse(10, -25, 45, 30, 0, 0, Math.PI * 2);
      var bodyGrad = ctx.createLinearGradient(-35, -55, 55, 5);
      bodyGrad.addColorStop(0, '#c81d1d');
      bodyGrad.addColorStop(1, '#8b1a1a');
      ctx.fillStyle = bodyGrad;
      ctx.fill();

      // ==== ШЕЯ ====
      ctx.beginPath();
      ctx.moveTo(40, -40);
      ctx.quadraticCurveTo(60, -55, 55, -75);
      ctx.lineTo(70, -75);
      ctx.quadraticCurveTo(70, -50, 50, -30);
      ctx.closePath();
      ctx.fillStyle = '#c81d1d';
      ctx.fill();

      // ==== ГОЛОВА ====
      ctx.beginPath();
      ctx.ellipse(65, -85, 20, 16, -0.2, 0, Math.PI * 2);
      ctx.fillStyle = '#c81d1d';
      ctx.fill();

      ctx.beginPath();
      ctx.ellipse(80, -82, 10, 8, -0.2, 0, Math.PI * 2);
      ctx.fillStyle = '#ffe4d0';
      ctx.fill();

      ctx.beginPath();
      ctx.ellipse(88, -82, 3, 2.5, 0, 0, Math.PI * 2);
      ctx.fillStyle = '#1a1a1a';
      ctx.fill();

      ctx.beginPath();
      ctx.arc(70, -90, 2.5, 0, Math.PI * 2);
      ctx.fillStyle = '#1a1a1a';
      ctx.fill();

      ctx.beginPath();
      ctx.ellipse(60, -95, 5, 8, -0.6, 0, Math.PI * 2);
      ctx.fillStyle = '#8b1a1a';
      ctx.fill();

      // ==== РОГА ====
      ctx.strokeStyle = '#e8d9b8';
      ctx.lineWidth = 4;
      ctx.lineCap = 'round';

      ctx.beginPath();
      ctx.moveTo(60, -100);
      ctx.quadraticCurveTo(50, -120, 55, -130);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(68, -100);
      ctx.quadraticCurveTo(78, -122, 74, -134);
      ctx.stroke();

      // ==== БОРОДКА ====
      ctx.beginPath();
      ctx.moveTo(78, -75);
      ctx.quadraticCurveTo(82, -60, 76, -55);
      ctx.quadraticCurveTo(80, -62, 74, -72);
      ctx.closePath();
      ctx.fillStyle = '#ffe4d0';
      ctx.fill();

      // ==== ХВОСТ ====
      var tailWag = Math.sin(phase * 1.5) * 4;
      ctx.beginPath();
      ctx.moveTo(-35, -35);
      ctx.quadraticCurveTo(-50 + tailWag, -40, -45, -55);
      ctx.lineWidth = 5;
      ctx.strokeStyle = '#c81d1d';
      ctx.stroke();

      // ==== БАНТ ====
      ctx.fillStyle = '#ffd700';
      ctx.beginPath();
      ctx.arc(55, -55, 5, 0, Math.PI * 2);
      ctx.fill();

      ctx.restore();

      if (wave > 0) {
        ctx.save();
        ctx.translate(x + 65 * scale, y - 140 * scale);
        ctx.globalAlpha = wave;

        var pw = 240;
        var ph = 60;
        ctx.fillStyle = '#c81d1d';
        ctx.beginPath();
        if (ctx.roundRect) {
          ctx.roundRect(-pw/2, -ph/2, pw, ph, 12);
        } else {
          ctx.rect(-pw/2, -ph/2, pw, ph);
        }
        ctx.fill();

        ctx.strokeStyle = '#ffd700';
        ctx.lineWidth = 3;
        ctx.stroke();

        ctx.fillStyle = '#ffffff';
        ctx.font = 'bold 22px -apple-system, "Segoe UI", Roboto, Arial, sans-serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.shadowBlur = 8;
        ctx.shadowColor = 'rgba(255,215,0,0.9)';
        ctx.fillText(GREETING, 0, 0);

        ctx.restore();
      }
    }

    function animate(now) {
      var t = now - start;
      ctx.clearRect(0, 0, W, H);

      var x, scale, wave, phase;
      var y = H - 60;

      if (t < 2000) {
        var p = t / 2000;
        p = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
        x = -100 + p * (W / 2 + 100);
        scale = 0.9;
        wave = 0;
        phase = t * 0.015;
      } else if (t < 4500) {
        x = W / 2;
        scale = 1;
        wave = Math.min(1, (t - 2000) / 400);
        y = H - 60 - Math.abs(Math.sin((t - 2000) * 0.008)) * 6;
        phase = (t - 2000) * 0.01;
      } else if (t < 6500) {
        var p2 = (t - 4500) / 2000;
        p2 = p2 < 0.5 ? 2 * p2 * p2 : 1 - Math.pow(-2 * p2 + 2, 2) / 2;
        x = W / 2 + p2 * (W / 2 + 100);
        scale = 0.9;
        wave = Math.max(0, 1 - (t - 4500) / 500);
        phase = (t - 4500) * 0.015;
      } else {
        return;
      }

      drawGoat(x, y, scale, wave, phase);
      requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);
  }

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