Новогодние украшения для сайта uCoz

Юрий Герук 2025-12-05 152
Новогодние украшения для сайта uCoz

Введение

Под новый год сайт хочется сделать уютнее и придать ему праздничное настроение. Снег, огоньки, иней и аккуратные декоративные элементы помогают выделить атмосферу праздника без серьезных переделок шаблонов. Ниже собрана подборка рабочих эффектов которые легко подключаются к сайтам uCoz, не требуют сторонних изображений и корректно работают в современных браузерах.

Крупные снежинки по всей странице

Вариант с крупными заметными снежинками без сторонних библиотек. Снежинки хорошо видны даже на белом фоне, плавно падают и немного вращаются.

<style>
.ny-big-snowflake {
 position: fixed;
 top: -10vh;
 color: #fdfdfd;
 font-size: 28px;
 pointer-events: none;
 user-select: none;
 z-index: 9998;
 text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
 animation-name: ny-big-snowfall;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}

@keyframes ny-big-snowfall {
 0% {
 transform: translate3d(0, -10vh, 0) rotate(0deg);
 }
 100% {
 transform: translate3d(var(--ny-shift-x, 0), 110vh, 0) rotate(360deg);
 }
}
</style>

<script>
(function() {
 var symbols = ['❄', '✻', '✼'];
 var count = 35;

 for (var i = 0; i < count; i++) {
 var el = document.createElement('div');
 el.className = 'ny-big-snowflake';
 el.textContent = symbols[Math.floor(Math.random() * symbols.length)];

 var left = Math.random() * 100;
 var delay = Math.random() * 8;
 var duration = 9 + Math.random() * 7;

 var shift = (Math.random() * 40 - 20).toFixed(1) + 'vw';

 el.style.left = left + 'vw';
 el.style.animationDuration = duration + 's';
 el.style.animationDelay = delay + 's';
 el.style.setProperty('--ny-shift-x', shift);

 document.body.appendChild(el);
 }
})();
</script>

Легкие мини снежинки кремового оттенка

Минималистичный вариант для сайтов с белым или очень светлым фоном. Кремовый оттенок делает снежинки заметными и при этом не слишком контрастными.

<style>
.snowflake {
 position: fixed;
 top: -10px;
 color: #f7e7c6;
 font-size: 16px;
 pointer-events: none;
 user-select: none;
 animation: ny-snow-fall 10s linear infinite;
 z-index: 9999;
 text-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

@keyframes ny-snow-fall {
 0% { transform: translate3d(0, 0, 0); }
 100% { transform: translate3d(0, 110vh, 0); }
}
</style>

<script>
(function() {
 var count = 25;

 for (var i = 0; i < count; i++) {
 var f = document.createElement('div');
 f.className = 'snowflake';
 f.textContent = '❄';

 var left = Math.random() * 100;
 var delay = Math.random() * 10;
 var duration = 8 + Math.random() * 6;

 f.style.left = left + 'vw';
 f.style.animationDuration = duration + 's';
 f.style.animationDelay = delay + 's';

 document.body.appendChild(f);
 }
})();
</script>

Гирлянда из огоньков с ярким миганием

Гирлянда выполнена через CSS, без картинок. Цветные лампочки заметно мигают и создают ощущение новогодних огней по верхней границе сайта.

<style>
.ny-garland {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 40px;
 pointer-events: none;
 z-index: 9999;
}

.ny-garland::before {
 content: "";
 position: absolute;
 inset: 0;
 background:
 radial-gradient(circle, red 0 5px, transparent 6px) 10% 60%,
 radial-gradient(circle, gold 0 5px, transparent 6px) 30% 40%,
 radial-gradient(circle, deepskyblue 0 5px, transparent 6px) 50% 60%,
 radial-gradient(circle, limegreen 0 5px, transparent 6px) 70% 40%,
 radial-gradient(circle, hotpink 0 5px, transparent 6px) 90% 60%;
 background-size: 110px 40px;
 background-repeat: repeat-x;
 animation: ny-garland-blink 1.3s linear infinite;
}

@keyframes ny-garland-blink {
 0% { opacity: 0.3; filter: brightness(0.7); }
 25% { opacity: 1; filter: brightness(1.6); }
 50% { opacity: 0.4; filter: brightness(0.9); }
 75% { opacity: 1; filter: brightness(1.7); }
 100% { opacity: 0.3; filter: brightness(0.7); }
}
</style>

<div class="ny-garland"></div>

Падающие подарки и новогодние иконки

Эффект падающих символов подарков, елочек и звезд. Работает как дополнительное украшение поверх основного снега.

<style>
.ny-icon {
 position: fixed;
 top: -10px;
 font-size: 28px;
 pointer-events: none;
 z-index: 9999;
 animation-name: ny-drop-icons;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}

@keyframes ny-drop-icons {
 0% { transform: translate3d(0, 0, 0); }
 100% { transform: translate3d(0, 120vh, 0); }
}
</style>

<script>
(function() {
 var icons = ['🎁', '✨', '🎄', '⭐'];
 var count = 20;

 for (var i = 0; i < count; i++) {
 var el = document.createElement('div');
 el.className = 'ny-icon';
 el.textContent = icons[Math.floor(Math.random() * icons.length)];

 var left = Math.random() * 100;
 var delay = Math.random() * 8;
 var duration = 9 + Math.random() * 6;

 el.style.left = left + 'vw';
 el.style.animationDuration = duration + 's';
 el.style.animationDelay = delay + 's';

 document.body.appendChild(el);
 }
})();
</script>

Заснеженные края сайта без изображений

Иней наверху и внизу сайта создается с помощью градиентов. Эффект легкий, статичный и не отвлекает от основного контента.

<style>
.ny-snow-top,
.ny-snow-bottom {
 width: 100%;
 height: 60px;
 position: relative;
 pointer-events: none;
 z-index: 100;
}

.ny-snow-top {
 background:
 radial-gradient(circle at 10% 120%, #ffffff 0 7px, transparent 8px),
 radial-gradient(circle at 30% 110%, #ffffff 0 7px, transparent 8px),
 radial-gradient(circle at 50% 120%, #ffffff 0 7px, transparent 8px),
 radial-gradient(circle at 70% 110%, #ffffff 0 7px, transparent 8px),
 radial-gradient(circle at 90% 120%, #ffffff 0 7px, transparent 8px);
 background-size: 90px 60px;
 background-repeat: repeat-x;
}

.ny-snow-bottom {
 background:
 radial-gradient(circle at 10% -20%, #ffffff 0 7px, transparent 8px),
 radial-gradient(circle at 30% -10%, #ffffff 0 7px, transparent 8px),
 radial-gradient(circle at 50% -20%, #ffffff 0 7px, transparent 8px),
 radial-gradient(circle at 70% -10%, #ffffff 0 7px, transparent 8px),
 radial-gradient(circle at 90% -20%, #ffffff 0 7px, transparent 8px);
 background-size: 90px 60px;
 background-repeat: repeat-x;
}
</style>

<div class="ny-snow-top"></div>
<!-- контент -->
<div class="ny-snow-bottom"></div>

Снеговой слой только на определенный блок

Снег идет только внутри выбранного блока. Можно применить к шапке, подвалу или отдельному блоку с акцией.

<style>
.ny-snow-layer {
 position: relative;
 overflow: hidden;
}

.ny-snow-layer::after {
 content: "";
 position: absolute;
 inset: 0;
 pointer-events: none;
 background-image:
 radial-gradient(circle, rgba(255,255,255,0.9) 0 2px, transparent 3px),
 radial-gradient(circle, rgba(255,255,255,0.7) 0 2px, transparent 3px);
 background-size: 40px 40px, 70px 70px;
 background-position: 0 0, 20px 20px;
 animation: ny-snow-layer-move 14s linear infinite;
}

@keyframes ny-snow-layer-move {
 0% { background-position: 0 0, 20px 20px; }
 100% { background-position: 0 300px, 20px 320px; }
}
</style>

Использование слоя.

<div class="ny-snow-layer">
 <!-- содержимое шапки или любого другого блока -->
</div>

Новогодний бейдж на логотипе

Небольшая иконка на логотипе создает праздничный акцент и не ломает верстку.

<style>
.ny-badge {
 position: relative;
 display: inline-block;
}

.ny-badge::after {
 content: "🎄";
 position: absolute;
 top: -8px;
 right: -10px;
 font-size: 20px;
 animation: ny-badge-bounce 2s ease-in-out infinite;
}

@keyframes ny-badge-bounce {
 0% { transform: translateY(0); }
 30% { transform: translateY(-3px); }
 60% { transform: translateY(0); }
 100% { transform: translateY(0); }
}
</style>

Пример использования.

<a href="/" class="logo ny-badge">Мой сайт</a>

Новогодняя поздравительная плашка

Компактная плашка с поздравлением вверху сайта. Можно использовать без дополнительных эффектов или вместе со снегом.

<style>
.ny-bar {
 background: linear-gradient(90deg, #b30047, #ff8a00);
 color: #ffffff;
 text-align: center;
 padding: 8px 12px;
 font-size: 14px;
 font-weight: 600;
}

.ny-bar span {
 margin: 0 6px;
}
</style>

Пример.

<div class="ny-bar">
 <span>🎄</span>
 <span>С наступающим новым годом</span>
 <span>❄</span>
</div>

Примечание по установке кода в uCoz

Подключение эффектов выполняется через шаблоны сайта.

  1. Глобальные эффекты такие как крупные снежинки, мини снег, падающие иконки и гирлянда
    Откройте панель управления, раздел Дизайн, Управление дизайном.
    Откройте шаблон Низ всех страниц.
    Вставьте стили <style>...</style> и скрипты <script>...</script> перед закрывающим </body>.
    Сохраните изменения и обновите сайт.
  2. Вставка декоративных блоков
    Иней, плашка, гирлянда и бейдж на логотипе размещаются в тех шаблонах где они должны показываться.
    Например плашку и гирлянду логично вставить в Верх всех страниц, а бейдж добавить к блоку где выводится логотип.
  3. Локальный снеговой слой
    Стили для .ny-snow-layer добавляются в общий CSS например в Низ всех страниц.
    Блок который нужно покрыть снегом оборачивается в <div class="ny-snow-layer">...</div> в нужном шаблоне.

Заключение

Эти эффекты позволяют быстро превратить обычный сайт uCoz в аккуратно оформленный новогодний вариант. Крупные заметные снежинки, легкий кремовый снег, огоньки, иней и небольшие акценты на логотипе и в шапке создают настроение и при этом не перегружают страницу и не мешают пользователям.

Оцените полезность материала!

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Теги:
снешинки, новый год, Гирлянда, снег, украшение

Комментарии

Сообщение об ошибке 🚀