Красная Коза показывает язык и говорит «ТАДАМ!
Красная Коза — символ 2027 года — выходит на сайт, показывает язык и говорит «ТАДАМ!». Юморная анимация-поздравление: без картинок, без плагинов, всё нарисовано кодом.
Ниже — живой пример, код и инструкция по установке.
Что делает скрипт
- Рисует красную козу — символ 2027 года
- Коза выходит слева, останавливается по центру
- Показывает язык — смешной момент
- Вылетает надпись «ТАДАМ!» с блёстками
- Появляются цифры «2027» с золотым свечением
- Коза уходит вправо, довольная
- Анимация запускается один раз при загрузке
- Работает на телефонах, планшетах, компьютерах
- Не мешает кликам по сайту
Немного о символе года
Год Красной Огненной Козы (или Овцы, или Барана — в китайской традиции это одно животное) официально начнётся 6 февраля 2027 года и закончится 25 января 2028 года.
В восточной традиции Коза символизирует доброту, мягкость, заботу и творчество. Но наша коза — с юмором. Она не просто поздравляет, а показывает язык и говорит «ТАДАМ!» — как будто говорит: «Ну что, готовы к 2027?»
Как установить
- Скопируйте код кнопкой выше
- Откройте файл footer.php вашей темы
- Вставьте код перед закрывающим тегом </body>
- Сохраните файл
- Очистите кеш сайта
Если не хотите лезть в код темы — вставьте через кнопку ▶ RUN прямо в запись. Тогда коза появится только на этой странице.
Где можно использовать
- Корпоративные сайты — поздравить клиентов с юмором
- Блоги — развеселить читателей
- Лендинги — привлечь внимание к акции
- Детские сайты — уместно и мило
- Портфолио — показать чувство юмора
- Интернет-магазины — праздничная атмосфера
Часто задаваемые вопросы
Коза будет мешать читать текст?
Нет. Она появляется внизу экрана на 8 секунд и уходит. После этого ресурсы не тратятся. Если не нравится — код можно удалить.
Можно ли поменять текст «ТАДАМ!»?
Да. В коде есть переменная TA_DAM — замените на свой текст.
Можно ли поменять «2027» на другой год?
Да. Переменная YEAR — меняйте на любой год.
Будет ли тормозить сайт?
Нет. Анимация длится 8 секунд, потом полностью останавливается. Дальше ресурсы браузера не расходуются.
Коза появляется каждый раз при загрузке?
Да. Если хотите, чтобы она показывалась один раз в день — можно добавить проверку через localStorage.
Работает ли на мобильных?
Да. Коза адаптируется под размер экрана — на телефоне будет меньше, но останется читаемой.
Можно ли поставить козу на все страницы сайта?
Да. Вставьте код не через ▶ RUN в запись, а в footer.php темы. Тогда коза будет появляться на всех страницах.
Как убрать козу?
Удалите код из записи или из footer.php. Всё исчезнет сразу.
Что можно докрутить
Если базовая версия понравилась — можно добавить:
- Искры и огоньки вокруг козы — символ стихии Огня
- Коза подмигивает
- Коза машет копытцем
- Дым из ноздрей
- Несколько коз — целое стадо
- Коза оставляет следы копыт
- Появление козы каждый час — для тех, кто долго на сайте
Все эти варианты — в следующих обновлениях. Следите за новыми скриптами.
Оптимизация скоростиИтог
Красная Коза показывает язык и говорит «ТАДАМ!» — юморная анимация-поздравление с Новым 2027 годом. Всё нарисовано кодом, работает в любом браузере, адаптируется под любой экран.
Установите — и пусть год Козы принесёт удачу и смех вашему сайту.
/*
* 🐐 Красная морда козы — появилась, показала язык, ушла
* Автор: Ведерников Сергей
* ИИ: Дэп — https://1promtai.ru/
*/
(function() {
'use strict';
if (window.__goatFaceRunning) return;
window.__goatFaceRunning = true;
function init() {
var canvas = document.createElement('canvas');
var W = 500;
var H = 500;
canvas.width = W * 2;
canvas.height = H * 2;
canvas.style.cssText = [
'position:fixed',
'bottom:60px',
'left:50%',
'transform:translateX(-50%)',
'width:' + W + 'px',
'height:' + H + 'px',
'max-width:100%',
'pointer-events:none',
'z-index:9997'
].join(';');
canvas.setAttribute('aria-hidden', 'true');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.setTransform(2, 0, 0, 2, 0, 0);
var CX = W / 2;
var CY = H / 2;
var start = performance.now();
var TOTAL = 6500;
var sparkles = [];
for (var i = 0; i < 40; i++) {
sparkles.push({
x: Math.random(),
y: Math.random(),
r: Math.random() * 4 + 2,
speed: Math.random() * 0.8 + 0.4,
phase: Math.random() * Math.PI * 2
});
}
function drawGoatFace(cx, cy, scale, tongueOut, bounce, phase, wink, smile) {
ctx.save();
ctx.translate(cx, cy + bounce);
ctx.scale(scale, scale);
// ==== ГОЛОВА ====
ctx.beginPath();
ctx.ellipse(0, 0, 130, 145, 0, 0, Math.PI * 2);
var headGrad = ctx.createRadialGradient(-40, -40, 30, 0, 0, 150);
headGrad.addColorStop(0, '#e01010');
headGrad.addColorStop(0.7, '#c81d1d');
headGrad.addColorStop(1, '#8b1a1a');
ctx.fillStyle = headGrad;
ctx.fill();
// ==== УШИ ====
ctx.save();
ctx.translate(-115, -30);
ctx.rotate(-0.4);
ctx.beginPath();
ctx.ellipse(-35, 0, 45, 20, 0, 0, Math.PI * 2);
ctx.fillStyle = '#a01515';
ctx.fill();
ctx.beginPath();
ctx.ellipse(-35, 0, 30, 12, 0, 0, Math.PI * 2);
ctx.fillStyle = '#e8a0a0';
ctx.fill();
ctx.restore();
ctx.save();
ctx.translate(115, -30);
ctx.rotate(0.4);
ctx.beginPath();
ctx.ellipse(35, 0, 45, 20, 0, 0, Math.PI * 2);
ctx.fillStyle = '#a01515';
ctx.fill();
ctx.beginPath();
ctx.ellipse(35, 0, 30, 12, 0, 0, Math.PI * 2);
ctx.fillStyle = '#e8a0a0';
ctx.fill();
ctx.restore();
// ==== РОГА ====
ctx.strokeStyle = '#e8d9b8';
ctx.lineWidth = 12;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(-35, -125);
ctx.quadraticCurveTo(-75, -165, -100, -140);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(35, -125);
ctx.quadraticCurveTo(75, -165, 100, -140);
ctx.stroke();
// ==== МОРДА ====
ctx.beginPath();
ctx.ellipse(0, 60, 80, 80, 0, 0, Math.PI * 2);
var muzzleGrad = ctx.createRadialGradient(0, 45, 15, 0, 65, 95);
muzzleGrad.addColorStop(0, '#e02020');
muzzleGrad.addColorStop(1, '#a01515');
ctx.fillStyle = muzzleGrad;
ctx.fill();
// ==== НОС ====
ctx.beginPath();
ctx.ellipse(0, 25, 32, 24, 0, 0, Math.PI * 2);
ctx.fillStyle = '#1a1a1a';
ctx.fill();
ctx.fillStyle = '#000000';
ctx.beginPath();
ctx.ellipse(-12, 25, 6, 9, 0.2, 0, Math.PI * 2);
ctx.ellipse(12, 25, 6, 9, -0.2, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.ellipse(-7, 15, 8, 5, 0, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,0.35)';
ctx.fill();
// ==== РОТ ====
var mouthY = 120;
var smileWidth = 48 + smile * 20;
ctx.beginPath();
ctx.moveTo(-smileWidth, mouthY);
ctx.quadraticCurveTo(0, mouthY + 40, smileWidth, mouthY);
ctx.quadraticCurveTo(0, mouthY + 20, -smileWidth, mouthY);
ctx.closePath();
ctx.fillStyle = '#2a0505';
ctx.fill();
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.moveTo(-smileWidth + 6, mouthY + 3);
ctx.quadraticCurveTo(0, mouthY + 16, smileWidth - 6, mouthY + 3);
ctx.lineTo(smileWidth - 10, mouthY + 9);
ctx.quadraticCurveTo(0, mouthY + 22, -smileWidth + 10, mouthY + 9);
ctx.closePath();
ctx.fill();
ctx.strokeStyle = '#000000';
ctx.lineWidth = 7;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(-smileWidth, mouthY);
ctx.quadraticCurveTo(0, mouthY + 40, smileWidth, mouthY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(-smileWidth, mouthY);
ctx.quadraticCurveTo(-smileWidth - 10, mouthY - 10, -smileWidth - 6, mouthY - 20);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(smileWidth, mouthY);
ctx.quadraticCurveTo(smileWidth + 10, mouthY - 10, smileWidth + 6, mouthY - 20);
ctx.stroke();
// ==== ЯЗЫК ====
if (tongueOut > 0) {
ctx.save();
ctx.translate(smileWidth - 15, mouthY + 15);
ctx.rotate(0.7 + Math.sin(phase * 2) * 0.1);
ctx.scale(tongueOut, tongueOut);
ctx.beginPath();
ctx.ellipse(35, 12, 42, 22, 0.3, 0, Math.PI * 2);
ctx.fillStyle = '#ff5c8d';
ctx.fill();
ctx.beginPath();
ctx.arc(70, 22, 22, 0, Math.PI * 2);
ctx.fillStyle = '#ff8fb3';
ctx.fill();
ctx.beginPath();
ctx.ellipse(25, 5, 16, 10, 0.2, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.fill();
ctx.restore();
}
// ==== ГЛАЗА ====
if (wink) {
ctx.beginPath();
ctx.ellipse(-45, -35, 30, 28, 0, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.strokeStyle = '#1a1a1a';
ctx.lineWidth = 7;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(-70, -35);
ctx.quadraticCurveTo(-45, -22, -20, -35);
ctx.stroke();
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(-63, -40); ctx.lineTo(-67, -50);
ctx.moveTo(-45, -32); ctx.lineTo(-45, -43);
ctx.moveTo(-27, -40); ctx.lineTo(-23, -50);
ctx.stroke();
} else {
ctx.beginPath();
ctx.ellipse(-45, -35, 30, 28, 0, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.beginPath();
ctx.arc(-42, -35, 15, 0, Math.PI * 2);
ctx.fillStyle = '#1a1a1a';
ctx.fill();
ctx.beginPath();
ctx.arc(-39, -41, 6, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.beginPath();
ctx.arc(-46, -32, 2, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
}
ctx.beginPath();
ctx.ellipse(45, -35, 30, 28, 0, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.beginPath();
ctx.arc(42, -35, 15, 0, Math.PI * 2);
ctx.fillStyle = '#1a1a1a';
ctx.fill();
ctx.beginPath();
ctx.arc(39, -41, 6, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.beginPath();
ctx.arc(46, -32, 2, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
// ==== БРОВИ ====
ctx.strokeStyle = '#1a1a1a';
ctx.lineWidth = 9;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(-70, -75);
ctx.quadraticCurveTo(-45, -92, -22, -72);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(70, -75);
ctx.quadraticCurveTo(45, -92, 22, -72);
ctx.stroke();
// ==== БОРОДКА ====
ctx.beginPath();
ctx.moveTo(0, 155);
ctx.quadraticCurveTo(-20, 180, -7, 200);
ctx.quadraticCurveTo(7, 180, 0, 155);
ctx.closePath();
ctx.fillStyle = '#a01515';
ctx.fill();
ctx.restore();
}
function drawTaDam(x, y, alpha, scale) {
ctx.save();
ctx.translate(x, y);
ctx.scale(scale, scale);
ctx.globalAlpha = alpha;
ctx.shadowBlur = 30;
ctx.shadowColor = 'rgba(255,215,0,0.9)';
ctx.fillStyle = '#ffd700';
ctx.font = 'bold 100px -apple-system, "Segoe UI", Roboto, Arial, sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.strokeStyle = '#8b1a1a';
ctx.lineWidth = 12;
ctx.strokeText('2027', 0, 0);
ctx.fillText('2027', 0, 0);
ctx.font = 'bold 70px -apple-system, "Segoe UI", Roboto, Arial, sans-serif';
ctx.strokeStyle = '#8b1a1a';
ctx.lineWidth = 10;
ctx.strokeText('\u0422\u0410\u0414\u0410\u041c!', 0, 90);
ctx.fillStyle = '#ffffff';
ctx.fillText('\u0422\u0410\u0414\u0410\u041c!', 0, 90);
ctx.restore();
}
function drawSparkles(alpha) {
sparkles.forEach(function(s) {
var sx = s.x * W;
var sy = s.y * H + Math.sin(performance.now() * 0.001 * s.speed + s.phase) * 30;
var sparkleAlpha = alpha * (0.5 + 0.5 * Math.sin(performance.now() * 0.003 + s.phase));
ctx.save();
ctx.globalAlpha = sparkleAlpha;
ctx.fillStyle = '#ffd700';
ctx.shadowBlur = 15;
ctx.shadowColor = 'rgba(255,215,0,0.9)';
ctx.beginPath();
for (var i = 0; i < 4; i++) {
var angle = (Math.PI / 2) * i;
var px = sx + Math.cos(angle) * s.r * 3;
var py = sy + Math.sin(angle) * s.r * 3;
if (i === 0) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
ctx.closePath();
ctx.fill();
ctx.restore();
});
}
function animate(now) {
var t = now - start;
if (t > TOTAL) {
if (canvas.parentNode) {
canvas.parentNode.removeChild(canvas);
}
return;
}
ctx.clearRect(0, 0, W, H);
var faceY, scale, tongueOut, bounce, phase, wink, smile;
if (t < 800) {
var p = t / 800;
p = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
faceY = H + 200 - p * 250;
scale = 0.85 + p * 0.15;
tongueOut = 0;
bounce = 0;
phase = 0;
wink = false;
smile = 0;
}
else if (t < 2000) {
var p2 = (t - 800) / 1200;
faceY = H - 60;
scale = 1;
tongueOut = Math.min(1, p2 * 3);
bounce = Math.abs(Math.sin((t - 800) * 0.01)) * 6;
phase = (t - 800) * 0.015;
wink = false;
smile = Math.min(1, p2 * 2);
}
else if (t < 2500) {
faceY = H - 60;
scale = 1;
tongueOut = 1;
bounce = Math.abs(Math.sin((t - 2000) * 0.02)) * 10;
phase = (t - 2000) * 0.02;
wink = true;
smile = 1;
}
else if (t < 5000) {
var p4 = (t - 2500) / 2500;
faceY = H - 60;
scale = 1;
tongueOut = 1;
bounce = Math.abs(Math.sin((t - 2500) * 0.015)) * 10;
phase = (t - 2500) * 0.02;
wink = true;
smile = 1;
drawGoatFace(CX, faceY, scale, tongueOut, bounce, phase, wink, smile);
if (p4 > 0.05) {
var taAlpha = Math.min(1, (p4 - 0.05) * 5);
drawTaDam(CX, 100, taAlpha, 1);
}
drawSparkles(0.8);
requestAnimationFrame(animate);
return;
}
else {
var p5 = (t - 5000) / 1500;
p5 = p5 < 0.5 ? 2 * p5 * p5 : 1 - Math.pow(-2 * p5 + 2, 2) / 2;
faceY = H - 60 + p5 * 300;
scale = 1 - p5 * 0.15;
tongueOut = Math.max(0, 1 - p5 * 2);
bounce = 0;
phase = (t - 5000) * 0.015;
wink = false;
smile = Math.max(0, 1 - p5 * 2);
drawSparkles(Math.max(0, 1 - p5 * 1.5));
}
drawGoatFace(CX, faceY, scale, tongueOut, bounce, phase, wink, smile);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();