Добавьте на сайт живую анимацию: коза выходит
2027 — год Красной Огненной Козы. По восточному календарю это символ доброты, творчества и гармонии. Огонь добавляет ей энергии и страсти.
Добавьте на сайт живую анимацию: коза выходит, поздравляет с Новым годом и уходит. Всё нарисовано кодом — без картинок, без плагинов, без загрузки лишних файлов.
Ниже — живой пример, код и инструкция по установке.
Что делает скрипт
- Рисует красную козу — символ 2027 года
- Коза выходит слева, останавливается по центру
- Показывает плакат «С Новым 2027 годом!»
- Машет копытцем, кланяется, подпрыгивает
- Уходит вправо и исчезает
- Анимация запускается один раз при загрузке страницы
- Работает на телефонах, планшетах, компьютерах
- Не мешает кликам по сайту
- Не требует плагинов и сторонних библиотек
Немного о символе года
Год Красной Огненной Козы (или Овцы, или Барана — в китайской традиции это одно животное) официально начнётся 6 февраля 2027 года и закончится 25 января 2028 года.
В восточной традиции Коза символизирует доброту, мягкость, заботу и творчество. Она любит красоту, искусство и уют. Огонь добавляет ей энергичности и решительности, но не лишает внутренней гармонии.
Именно поэтому в анимации коза двигается плавно, показывает плакат с золотой рамкой и мягко кланяется зрителям.
Как установить
- Скопируйте код кнопкой выше
- Откройте файл footer.php вашей темы
- Вставьте код перед закрывающим тегом </body>
- Сохраните файл
- Очистите кеш сайта
Если не хотите лезть в код темы — вставьте через кнопку ▶ 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();
}
})();