Новогодняя гирлянда на сайт за 5 минут: скрипты и плагины 2025-2026

Создать праздничное настроение на сайте можно всего за пару минут. Разберем способы добавления новогодней гирлянды для разных стеков: от чистого HTML/CSS до популярных CMS и JS-фреймворков.

1. HTML + CSS (+ JS)

Самый универсальный способ. Для простого эффекта достаточно чистого HTML и CSS. События мыши или сложную анимацию можно добавить через JS.

Новогдняя гирлянда для веб-сайта

HtML+CSS

Пример реализации CSS-гирлянды: Создаем список <ul class="lightrope"> с круглыми <li> (лампочками) и добавляем анимацию мерцания.

HTML:

  <ul class="lightrope">
    <!-- Повторяем li столько раз, сколько нужно на ширину экрана (около 20-30 шт) -->
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>

CSS:

.lightrope {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  margin: -15px 0 0 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}

.lightrope li {
  position: relative;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  width: 12px;
  height: 28px;
  border-radius: 50%;
  margin: 20px;
  display: inline-block;
  background: #00f7a5;
  box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  -webkit-animation-name: flash-1;
  animation-name: flash-1;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.lightrope li:nth-child(2n+1) {
  background: cyan;
  box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.5);
  -webkit-animation-name: flash-2;
  animation-name: flash-2;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.lightrope li:nth-child(4n+2) {
  background: #f70094;
  box-shadow: 0px 4.66667px 24px 3px #f70094;
  -webkit-animation-name: flash-3;
  animation-name: flash-3;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
}

.lightrope li:nth-child(odd) {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
}

.lightrope li:nth-child(3n+1) {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
}

.lightrope li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.33333px;
  border-radius: 3px;
  top: -4.66667px;
  left: 1px;
}

.lightrope li:after {
  content: "";
  top: -14px;
  left: 9px;
  position: absolute;
  width: 52px;
  height: 18.66667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}

.lightrope li:last-child:after {
  content: none;
}

.lightrope li:first-child {
  margin-left: -40px;
}

@-webkit-keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-1 {
  0%, 100% {
    background: #00f7a5;
    box-shadow: 0px 4.66667px 24px 3px #00f7a5;
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@-webkit-keyframes flash-2 {
  0%, 100% {
    background: cyan;
    box-shadow: 0px 4.66667px 24px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}

@keyframes flash-2 {
  0%, 100% {
    background: cyan;
    box-shadow: 0px 4.66667px 24px 3px cyan;
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}

@-webkit-keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.66667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}

@keyframes flash-3 {
  0%, 100% {
    background: #f70094;
    box-shadow: 0px 4.66667px 24px 3px #f70094;
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.66667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}

Варианты посложнее:

SVG + CSS3: использование векторной графики для более детальных лампочек.
Интерактивность: добавление JS-скриптов (например, «интерактивная гирлянда от Яндекса»), где шарики реагируют на наведение курсора звуком или движением.
Готовые скрипты: cервисы вроде sitespectr или uGuide предлагают готовые виджеты, добавляющие сразу и гирлянду, и падающий снег.

2. Новогодняя шапка на WordPress

В WordPress можно пойти двумя путями: установить готовый плагин или внести правки в код темы (файл functions.php).

Готовые плагины (бесплатно)

Ищите в репозитории по запросам "Christmas Lights" или "Holiday Decoration".

Christmas Lights — классические плагины, выводящие гирлянду вверху.
WFE (Weather Effect) — часто используется для добавления падающего снега (Snow effect).

Новогодняя гирлянда для сайта WordPress

Xmas Decoration

Кастомное решение (код)

Для полного контроля над дизайном можно использовать фильтр body_class. Это позволит менять логотип или фон шапки автоматически в заданные даты, не нагружая сайт плагинами.

PHP (добавить в functions.php вашей темы):

function holiday_body_class($classes){
  $day = (int)date('z'); // Получаем номер дня в году (0-365)
  
  // Включаем класс holiday с ~16 декабря ($day > 349) по ~14 января ($day < 14)
  if ($day > 349 || $day < 14) {
      $classes[] = 'holiday-mode';
  }
  return $classes;
}
add_filter('body_class', 'holiday_body_class');

CSS (в стилях темы):

/* Правила сработают только в указанные даты */
body.holiday-mode .site-header {
  background-image: url("/images/garland-bg.png");
  background-repeat: repeat-x;
  background-position: top center;
}

body.holiday-mode .logo img {
  /* Если нужно подменить логотип на праздничный */
  content: url("/images/logo-xmas.png");
}

3. Новогодняя шапка на 1С-Битрикс

В экосистеме Битрикс чаще используют модули из Маркетплейса, чтобы не править шаблоны компонентов вручную и не терять обновления.

Популярные модули:

«Новогодняя гирлянда» (Формула продаж): Рисует гирлянду шаров, которые двигаются и издают звук при наведении.
«Новогодние украшения» (Profi/Trade): Комплексное решение (гирлянда, снег, игрушки) с гибкими настройками (z-index, тип анимации, расположение) прямо из админки.

Своё решение: Можно вставить HTML/CSS код (как в пункте 1) непосредственно в шаблон шапки (header.php шаблона сайта).

Важно: Учитывайте адаптивность. Магазины на Битрикс часто имеют сложную структуру, поэтому проверьте, чтобы <ul> гирлянды не перекрывал кнопки корзины или поиска на мобильных устройствах (используйте pointer-events: none для контейнера снега).

4. Новогодняя шапка на Tilda

В Tilda нет классических плагинов, но есть библиотека блоков и возможность вставки кода.

Штатные блоки

В библиотеке блоков Тильды (раздел «Другое») ищите по поиску «NY»:

NY100: Новогоднее украшение (ветки и подарки снизу).
NY120 / NY130: Эффект падающего снега.

Кастомный код (Block T123)

Для красивой гирлянды в шапке используйте блок T123 (HTML-код).

Создайте блок T123 в самом верху страницы (Header).
Вставьте туда HTML и CSS код из пункта 1 этой статьи.
Оберните CSS в тег <style>, а HTML оставьте как есть.
Скрипт отрисует гирлянду. Это работает на любых экранах и не ломает стандартную верстку Tilda.

Аккаунт Gerwin PRO

Подробнее

Безлимитные генерации, безусловная скидка 40% на пополнение баланса и доступ к полному функционалу сервиса

5. Решения для React

В React-приложениях оформление лучше выносить в компоненты или использовать npm-пакеты.

Проверенные библиотеки:

react-snowfall: Самый популярный и легкий компонент для снега.
react-confetti: Можно настроить под "снег", используя белые цвета и медленную скорость.

Пример использования (react-snowfall):

npm install react-snowfall

import React from 'react';
import Snowfall from 'react-snowfall';

const App = () => {
  return (
    <div style={{ position: 'relative' }}>
      {/* Снег будет падать поверх всего контента */}
      <Snowfall 
         style={{ position: 'fixed', top: 0, left: 0, zIndex: 9999 }}
         snowflakeCount={200}
      />
      <h1>С Новым Годом!</h1>
    </div>
  );
}
export default App;

Своё решение: Для гирлянды проще всего создать компонент <Garland />, внутри которого будет верстка (как в пункте 1) или SVG. Для сложных анимаций можно использовать библиотеки Framer Motion.

6. Решения для Vue.js

Для Vue важно учитывать версию фреймворка (Vue 2 или Vue 3).

Библиотеки:

vue3-particles: Современная обертка над мощной библиотекой tsparticles. Позволяет создать снег, фейерверки и гирлянды.
vsnow: Простой плагин, но чаще используется для Vue 2.

Пример (Vue 3 + particles):

<!-- Установка: npm install @tsparticles/vue3 tsparticles-engine -->
<template>
  <vue-particles
    id="tsparticles"
    :options="{
      preset: 'snow',
      particles: {
        move: { speed: 2 }
      }
    }"
  />
</template>

Для простой гирлянды во Vue достаточно добавить код верстки в App.vue или компонент Header.vue и применить Scoped CSS.