Таймер до Нового года и Снегурочка на сайт — скрипт без плагинов
Таймер до Нового года и танцующая Снегурочка — два эффекта в одном скрипте. Таймер тикает по центру страницы, Снегурочка машет рукой в левом углу, вокруг неё кружатся снежинки. Всё работает без плагинов, не тормозит сайт, автоматически обновляется каждую секунду.
Ниже — живой пример, код и инструкция.
Что делает скрипт:
Показывает таймер до Нового года — дни, часы, минуты, секунды
Секунды реально тикают — обновление каждую секунду
В левом нижнем углу стоит длинноногая Снегурочка
Снегурочка покачивается, наклоняется, машет рукой
Вокруг неё кружатся снежинки
Когда Новый год наступит — таймер заменится поздравлением
Не мешает кликам по сайту
Работает на телефонах, планшетах, компьютерах
Не требует плагинов
Как установить
Скопируйте код кнопкой выше
Откройте файл footer.php вашей темы
Вставьте код перед закрывающим тегом </body>
Сохраните файл
Где можно использовать
- Интернет-магазины — создать ощущение приближающегося праздника
- Блоги — развлечь читателей и украсить к Новому году
- Детские сайты — мило и уместно
- Корпоративные сайты — поздравить клиентов
- Лендинги — создать срочность (до Нового года осталось…)
- Портфолио — показать внимание к деталям
/*
* Таймер до Нового года + Снегурочка
* Автор: Ведерников Сергей
* ИИ: Дэп — https://1promtai.ru/
*/
(function() {
'use strict';
if (window.__nyTimerSneg) return;
window.__nyTimerSneg = true;
function getTargetDate() {
var now = new Date();
var year = now.getFullYear();
return new Date(year + 1, 0, 1, 0, 0, 0);
}
var GREETING = '\uD83C\uDF84 \u0421 \u041D\u043E\u0432\u044B\u043C \u0433\u043E\u0434\u043E\u043C! \uD83C\uDF84';
function init() {
// ==================================================
// ============ ТАЙМЕР ДО НОВОГО ГОДА ===============
// ==================================================
var target = getTargetDate();
var wrap = document.createElement('div');
wrap.className = 'ny-timer';
wrap.style.cssText = [
'display:flex',
'justify-content:center',
'align-items:center',
'gap:14px',
'flex-wrap:wrap',
'padding:28px 24px',
'margin:24px auto',
'max-width:760px',
'background:linear-gradient(135deg,#c81d1d 0%,#8b0f0f 45%,#0a1f4a 55%,#1e5bc8 100%)',
'border-radius:20px',
'box-shadow:0 10px 40px rgba(200,29,29,0.45),0 0 60px rgba(30,91,200,0.5)',
'border:2px solid rgba(255,255,255,0.25)',
'font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif',
'color:#fff',
'position:relative'
].join(';');
var title = document.createElement('div');
title.textContent = '\u0414\u043E \u041D\u043E\u0432\u043E\u0433\u043E \u0433\u043E\u0434\u0430 \u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C:';
title.style.cssText = [
'width:100%',
'text-align:center',
'font-size:16px',
'font-weight:600',
'letter-spacing:0.1em',
'text-transform:uppercase',
'color:#fff',
'text-shadow:0 0 12px rgba(255,80,80,0.9),0 0 20px rgba(100,180,255,0.7)',
'margin-bottom:10px'
].join(';');
wrap.appendChild(title);
var fields = [
{ key: 'days', label: '\u0434\u043D\u0435\u0439' },
{ key: 'hours', label: '\u0447\u0430\u0441\u043E\u0432' },
{ key: 'minutes', label: '\u043C\u0438\u043D\u0443\u0442' },
{ key: 'seconds', label: '\u0441\u0435\u043A\u0443\u043D\u0434' }
];
var boxes = {};
fields.forEach(function(f) {
var box = document.createElement('div');
box.style.cssText = [
'display:flex',
'flex-direction:column',
'align-items:center',
'min-width:82px',
'padding:14px 16px',
'background:linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.04))',
'border:2px solid rgba(255,255,255,0.35)',
'border-radius:14px',
'box-shadow:inset 0 0 20px rgba(255,255,255,0.08),0 4px 14px rgba(0,0,0,0.25)',
'backdrop-filter:blur(8px)'
].join(';');
var num = document.createElement('div');
num.style.cssText = [
'font-size:38px',
'font-weight:800',
'line-height:1',
'font-variant-numeric:tabular-nums',
'color:#fff',
'text-shadow:0 0 10px rgba(255,60,60,1),0 0 20px rgba(60,140,255,1),0 0 30px rgba(255,60,60,0.6)'
].join(';');
num.textContent = '00';
var lbl = document.createElement('div');
lbl.style.cssText = [
'font-size:11px',
'font-weight:600',
'color:#ffe4e4',
'text-transform:uppercase',
'letter-spacing:0.1em',
'margin-top:6px',
'text-shadow:0 0 8px rgba(100,180,255,0.9)'
].join(';');
lbl.textContent = f.label;
box.appendChild(num);
box.appendChild(lbl);
wrap.appendChild(box);
boxes[f.key] = num;
});
// === Вставляем таймер В МЕСТО КОДА, а не в конец body ===
var selfScript = document.currentScript || (function() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
if (selfScript && selfScript.parentNode) {
selfScript.parentNode.insertBefore(wrap, selfScript);
} else {
document.body.appendChild(wrap);
}
function pad(n) { return n < 10 ? '0' + n : '' + n; }
function update() {
var diff = target - new Date();
if (diff <= 0) {
wrap.innerHTML = '<div style="font-size:clamp(20px,4vw,36px);font-weight:700;text-align:center;padding:8px 20px;text-shadow:0 0 20px rgba(255,80,80,0.9),0 0 30px rgba(100,180,255,0.8);">' + GREETING + '</div>';
clearInterval(timerId);
return;
}
var s = Math.floor(diff / 1000);
var d = Math.floor(s / 86400); s %= 86400;
var h = Math.floor(s / 3600); s %= 3600;
var m = Math.floor(s / 60); s %= 60;
boxes.days.textContent = pad(d);
boxes.hours.textContent = pad(h);
boxes.minutes.textContent = pad(m);
boxes.seconds.textContent = pad(s);
}
update();
var timerId = setInterval(update, 1000);
// ==================================================
// ============ СНЕГУРОЧКА В УГЛУ ===================
// ==================================================
var canvas = document.createElement('canvas');
var W = 160;
var H = 340;
canvas.width = W * 2;
canvas.height = H * 2;
canvas.style.cssText = [
'position:fixed',
'bottom:16px',
'left:16px',
'width:' + W + 'px',
'height:' + H + 'px',
'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 start = performance.now();
function draw(now) {
var t = now - start;
ctx.clearRect(0, 0, W, H);
var bob = Math.sin(t * 0.002) * 3;
var tilt = Math.sin(t * 0.0018) * 0.04;
var skirtSway = Math.sin(t * 0.0025) * 0.15;
var cx = W / 2;
var baseY = H - 20 + bob;
ctx.save();
ctx.translate(cx, baseY);
ctx.rotate(tilt);
// Тень
ctx.beginPath();
ctx.ellipse(0, 6, 38, 7, 0, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(0,0,0,0.18)';
ctx.fill();
// ===== НОГИ =====
ctx.save();
ctx.translate(-8, -105);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.quadraticCurveTo(-4, 50, -2, 100);
ctx.lineWidth = 7;
ctx.strokeStyle = '#f5e0d0';
ctx.lineCap = 'round';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(-2, 100);
ctx.quadraticCurveTo(-6, 108, 2, 108);
ctx.quadraticCurveTo(8, 108, 6, 100);
ctx.closePath();
ctx.fillStyle = '#3b82f6';
ctx.fill();
ctx.restore();
ctx.save();
ctx.translate(8, -105);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.quadraticCurveTo(4, 50, 2, 100);
ctx.lineWidth = 7;
ctx.strokeStyle = '#f5e0d0';
ctx.lineCap = 'round';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(2, 100);
ctx.quadraticCurveTo(-2, 108, 6, 108);
ctx.quadraticCurveTo(12, 108, 10, 100);
ctx.closePath();
ctx.fillStyle = '#3b82f6';
ctx.fill();
ctx.restore();
// ===== ШУБА =====
ctx.save();
ctx.rotate(skirtSway * 0.3);
ctx.beginPath();
ctx.moveTo(-28, -105);
ctx.quadraticCurveTo(-34, -160, -22, -200);
ctx.lineTo(22, -200);
ctx.quadraticCurveTo(34, -160, 28, -105);
ctx.closePath();
var coatGrad = ctx.createLinearGradient(0, -200, 0, -105);
coatGrad.addColorStop(0, '#bfe6ff');
coatGrad.addColorStop(1, '#6cb8e8');
ctx.fillStyle = coatGrad;
ctx.fill();
ctx.beginPath();
ctx.moveTo(-28, -105);
ctx.quadraticCurveTo(0, -95, 28, -105);
ctx.quadraticCurveTo(0, -112, -28, -105);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.beginPath();
ctx.moveTo(0, -200);
ctx.lineTo(0, -105);
ctx.lineWidth = 6;
ctx.strokeStyle = '#ffffff';
ctx.lineCap = 'round';
ctx.stroke();
ctx.fillStyle = '#ffffff';
[ -180, -160, -140 ].forEach(function(y) {
ctx.beginPath();
ctx.arc(0, y, 2.5, 0, Math.PI * 2);
ctx.fill();
});
ctx.restore();
// ===== РУКИ =====
var wave = Math.sin(t * 0.004) * 0.4;
ctx.save();
ctx.translate(-22, -185);
ctx.rotate(-0.5 + wave);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.quadraticCurveTo(-14, 30, -10, 62);
ctx.lineWidth = 8;
ctx.strokeStyle = '#bfe6ff';
ctx.lineCap = 'round';
ctx.stroke();
ctx.beginPath();
ctx.arc(-10, 64, 7, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.restore();
ctx.save();
ctx.translate(22, -185);
ctx.rotate(0.35);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.quadraticCurveTo(14, 30, 10, 62);
ctx.lineWidth = 8;
ctx.strokeStyle = '#bfe6ff';
ctx.lineCap = 'round';
ctx.stroke();
ctx.beginPath();
ctx.arc(10, 64, 7, 0, Math.PI * 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.restore();
// ===== ГОЛОВА =====
ctx.beginPath();
ctx.arc(0, -225, 22, 0, Math.PI * 2);
ctx.fillStyle = '#ffe4d0';
ctx.fill();
ctx.beginPath();
ctx.arc(-11, -220, 5, 0, Math.PI * 2);
ctx.arc(11, -220, 5, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,140,140,0.55)';
ctx.fill();
ctx.fillStyle = '#1a1a1a';
ctx.beginPath(); ctx.arc(-7, -228, 2.4, 0, Math.PI * 2); ctx.fill();
ctx.beginPath(); ctx.arc(7, -228, 2.4, 0, Math.PI * 2); ctx.fill();
ctx.strokeStyle = '#1a1a1a';
ctx.lineWidth = 1.2;
ctx.beginPath(); ctx.moveTo(-10, -232); ctx.lineTo(-5, -230); ctx.stroke();
ctx.beginPath(); ctx.moveTo(4, -230); ctx.lineTo(9, -232); ctx.stroke();
ctx.beginPath();
ctx.arc(0, -215, 3, 0, Math.PI, false);
ctx.strokeStyle = '#e05c7a';
ctx.lineWidth = 1.6;
ctx.stroke();
// ===== ВОЛОСЫ =====
ctx.beginPath();
ctx.moveTo(-22, -240);
ctx.quadraticCurveTo(-38, -200, -30, -140);
ctx.quadraticCurveTo(-24, -150, -18, -160);
ctx.quadraticCurveTo(-16, -200, -18, -235);
ctx.closePath();
ctx.fillStyle = '#ffd966';
ctx.fill();
ctx.beginPath();
ctx.moveTo(22, -240);
ctx.quadraticCurveTo(38, -200, 30, -140);
ctx.quadraticCurveTo(24, -150, 18, -160);
ctx.quadraticCurveTo(16, -200, 18, -235);
ctx.closePath();
ctx.fillStyle = '#ffd966';
ctx.fill();
ctx.beginPath();
ctx.moveTo(-18, -240);
ctx.quadraticCurveTo(-26, -215, -20, -190);
ctx.quadraticCurveTo(-16, -210, -14, -230);
ctx.closePath();
ctx.fillStyle = '#ffcc33';
ctx.fill();
ctx.beginPath();
ctx.moveTo(18, -240);
ctx.quadraticCurveTo(26, -215, 20, -190);
ctx.quadraticCurveTo(16, -210, 14, -230);
ctx.closePath();
ctx.fillStyle = '#ffcc33';
ctx.fill();
ctx.beginPath();
ctx.moveTo(-22, -238);
ctx.quadraticCurveTo(0, -258, 22, -238);
ctx.quadraticCurveTo(0, -248, -22, -238);
ctx.fillStyle = '#ffd966';
ctx.fill();
// ===== КОКОШНИК =====
ctx.beginPath();
ctx.moveTo(-24, -240);
ctx.quadraticCurveTo(0, -278, 24, -240);
ctx.closePath();
ctx.fillStyle = '#3b82f6';
ctx.fill();
ctx.beginPath();
ctx.moveTo(-24, -240);
ctx.quadraticCurveTo(0, -244, 24, -240);
ctx.lineWidth = 3;
ctx.strokeStyle = '#ffffff';
ctx.stroke();
ctx.save();
ctx.translate(0, -262);
ctx.strokeStyle = '#ffffff';
ctx.lineWidth = 1.6;
for (var i = 0; i < 6; i++) {
ctx.save();
ctx.rotate((Math.PI / 3) * i);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, -7);
ctx.stroke();
ctx.restore();
}
ctx.restore();
// ===== СНЕЖИНКИ ВОКРУГ =====
for (var s = 0; s < 5; s++) {
var angle = (Math.PI * 2 / 5) * s + t * 0.0006;
var radius = 55 + Math.sin(t * 0.002 + s) * 5;
var sx = Math.cos(angle) * radius;
var sy = -225 + Math.sin(angle) * radius;
ctx.save();
ctx.translate(sx, sy);
ctx.rotate(t * 0.001 + s);
ctx.strokeStyle = 'rgba(180,220,255,0.8)';
ctx.lineWidth = 1.2;
for (var j = 0; j < 6; j++) {
ctx.save();
ctx.rotate((Math.PI / 3) * j);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, -4);
ctx.stroke();
ctx.restore();
}
ctx.restore();
}
ctx.restore();
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();