BX
BXMax
Telegram GitHub
Инструкция Junior
15.12.2025 5 мин чтения

Создание модуля новогодних украшений для Битрикс

Новогоднее настроение на сайте — это не просто красивая деталь, а важный элемент взаимодействия с посетителями. В праздничный сезон пользователи ожидают увидеть что-то особенное: падающий снег, мерцающие гирлянды, забавные украшения. Такие мелочи создают тёплую атмосферу, повышают лояльность и выделяют ваш сайт среди конкурентов.

Кирилл Новожилов

Кирилл Новожилов

Автор

Создание модуля новогодних украшений для Битрикс

Вместо того чтобы каждый год искать готовые решения или вставлять скрипты вручную, мы создадим собственный модуль с удобными настройками в админке. Один раз настроил — и каждый декабрь просто включаешь!

В этой статье мы рассмотрим, как создать собственный модуль для добавления новогодних эффектов на сайт под управлением 1С-Битрикс. Модуль будет включать:

  • ❄️ Падающий снег — с настройкой интенсивности, скорости и размера снежинок
  • 🎄 Гирлянды — мигающие огоньки на выбранных элементах
  • 🎅 Украшения — новогодние шапки, шарики, звёзды на логотипах и других блоках

Скачать полный исходный код модуля можно в нашем Telegram канале. Подписывайтесь, чтобы не пропустить новые материалы!

Структура модуля

Модуль располагается в /local/modules/newyear.effects/ и имеет следующую структуру:

        newyear.effects/
├── install/
│   ├── index.php        # Установщик модуля
│   └── version.php      # Версия модуля
├── lang/
│   └── ru/
│       ├── install/
│       │   └── index.php
│       └── options.php
├── lib/
│   ├── EventHandler.php     # Обработчик событий
│   └── EffectsManager.php   # API для работы с эффектами
├── assets/
│   ├── css/
│   │   └── effects.css  # Стили эффектов
│   └── js/
│       └── effects.js   # JavaScript эффектов
├── include.php          # Файл подключения
├── options.php          # Страница настроек
└── default_option.php   # Настройки по умолчанию

Шаг 1: Файл версии (install/version.php)

Начинаем с определения версии модуля. Файл простой, не обязательный, но удобен при переносе на разные сайты, чтобы не запутаться в версиях:

        <?php
$arModuleVersion = [
    'VERSION' => '1.0.0',
    'VERSION_DATE' => '2025-12-15 12:00:00',
];

Шаг 2: Установщик модуля (install/index.php)

Класс установщика наследуется от CModule и содержит методы:

Конструктор

В конструкторе определяем метаданные модуля:

  • MODULE_ID — идентификатор в формате vendor.module
  • MODULE_NAME, MODULE_DESCRIPTION — название и описание
  • PARTNER_NAME, PARTNER_URI — информация о разработчике

DoInstall() и DoUninstall()

Методы установки и удаления:

        public function DoInstall()
{
    ModuleManager::registerModule($this->MODULE_ID);
    $this->InstallFiles();      // Копируем assets
    $this->InstallEvents();     // Регистрируем обработчики
    $this->setDefaultOptions(); // Устанавливаем настройки
}

InstallEvents()

Регистрируем обработчик события OnProlog — он сработает на каждой странице публичной части:

        $eventManager->registerEventHandler(
    'main',
    'OnProlog',
    $this->MODULE_ID,
    \NewYear\Effects\EventHandler::class,
    'onProlog'
);

InstallFiles()

Копируем CSS и JS файлы в публичную папку /local/assets/newyear.effects/, чтобы браузер мог их загрузить.

Шаг 3: Обработчик событий (lib/EventHandler.php)

Класс EventHandler отвечает за подключение эффектов на страницу:

        public static function onProlog()
{
    // Не подключаем в админке
    if (defined('ADMIN_SECTION') && ADMIN_SECTION === true) {
        return;
    }
    
    $asset = Asset::getInstance();
    $asset->addCss('/local/assets/newyear.effects/css/effects.css');
    $asset->addJs('/local/assets/newyear.effects/js/effects.js');
    
    self::addSettingsToPage();
}

Метод addSettingsToPage() передаёт настройки модуля в JavaScript через глобальную переменную:

        use Bitrix\Main\Page\Asset;
use Bitrix\Main\Web\Json;

$settings = self::getSettings();
$settingsJson = Json::encode($settings);
        
Asset::getInstance()->addString(
		'<script>window.NewYearEffectsSettings = ' . $settingsJson . ';</script>',
		false,
		\Bitrix\Main\Page\AssetLocation::AFTER_JS
);

Шаг 4: Страница настроек (options.php)

Страница настроек в админке создаётся через класс CAdminTabControl. Мы организуем настройки в три вкладки:

  1. Снег — включение, интенсивность, скорость, размер снежинок
  2. Гирлянда — включение, CSS-селектор, цвета, скорость мигания, отступ от шапки
  3. Украшения — включение, CSS-селектор, тип украшения

Сохранение настроек

        use Bitrix\Main\Config\Option;

if ($request->isPost() && check_bitrix_sessid()) {
    Option::set($module_id, 'snow_enabled', $request->getPost('snow_enabled'));
    Option::set($module_id, 'snow_intensity', $request->getPost('snow_intensity'));
    // ... остальные настройки
}

Чтение настроек

        use Bitrix\Main\Config\Option;

$snowEnabled = Option::get($module_id, 'snow_enabled', 'Y');
$snowIntensity = Option::get($module_id, 'snow_intensity', '50');

Шаг 5: JavaScript эффектов (assets/js/effects.js)

JavaScript читает настройки из window.NewYearEffectsSettings и инициализирует эффекты.

Эффект снега

Создаём контейнер с position: fixed и добавляем в него снежинки:

        function initSnowEffect(config) {
    const container = document.createElement('div');
    container.className = 'newyear-snow-container';
    document.body.appendChild(container);
    
    // Создаём снежинки с интервалом
    setInterval(() => createSnowflake(container, config), interval);
}

Каждая снежинка — это div с Unicode-символом (❄, ❅, ❆) и CSS-анимацией падения.

Эффект гирлянды

Находим элементы по селектору и добавляем к ним гирлянду:

        function initGarlandEffect(config) {
    const elements = document.querySelectorAll(config.selector);
    
    elements.forEach(element => {
        // Создаём провод (SVG) и лампочки
        // Запускаем анимацию мигания
    });
}

Лампочки мигают группами через setInterval, получая/снимая класс lit.

Эффект украшений

Добавляем украшения к выбранным элементам:

        function initDecorationsEffect(config) {
    const elements = document.querySelectorAll(config.selector);
    
    elements.forEach(element => {
        const decoration = createDecoration(config.type);
        element.appendChild(decoration);
    });
}

Тип украшения (шапка, шар, звезда, леденец) определяется в настройках.

Шаг 6: CSS стили (assets/css/effects.css)

Стили снега

        .newyear-snow-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;  /* Не мешаем кликам */
    z-index: 9999;
}

.newyear-snowflake {
    position: absolute;
    animation: newyear-snowfall linear infinite;
}

@keyframes newyear-snowfall {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

Стили гирлянды

Лампочки создаются с помощью CSS (форма, тень при свечении):

        .newyear-bulb {
    width: 12px; height: 16px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.newyear-bulb.lit {
    box-shadow: 
        0 0 10px currentColor,
        0 0 20px currentColor;
}

Стили украшений

Каждый тип украшения стилизуется отдельно с использованием ::before, ::after и SVG.

Настройка CSS-селекторов

Самая мощная возможность модуля — гибкие CSS-селекторы для размещения эффектов:

Настройка Пример значения Описание
Гирлянда header, .header, #header Элементы для размещения гирлянды
Украшения .logo, #logo, .site-logo Элементы для украшений

Можно указать любой валидный CSS-селектор:

  • По классу: .my-block
  • По ID: #header
  • По тегу: nav
  • Комбинированный: .page-header .logo-wrapper

Использование API модуля

Модуль предоставляет класс EffectsManager для программного управления:

        use Bitrix\Main\Loader;
use NewYear\Effects\EffectsManager;

Loader::includeModule('newyear.effects');

// Проверка состояния
if (EffectsManager::isSnowEnabled()) {
    // Снег включен
}

// Программное управление
EffectsManager::setEffectEnabled('snow', false);  // Отключить снег
EffectsManager::setSnowIntensity(80);             // Изменить интенсивность

Установка модуля

  1. Скопируйте папку newyear.effects в /local/modules/
  2. Перейдите в админку: Настройки → Marketplace → Установленные решения
  3. Найдите модуль «Новогодние эффекты» и нажмите «Установить»
  4. Настройте эффекты: Настройки → Настройки продукта → Настройки модулей → Новогодние эффекты

Советы по использованию

1.Производительность: При высокой интенсивности снега на слабых устройствах возможны лаги. Рекомендуется интенсивность 30-50.

2.Мобильные устройства: Эффекты работают на мобильных, но можно добавить проверку @media для отключения на маленьких экранах.

3.Периодичность: Модуль можно включать только на период праздников, изменяя настройку *_enabled.

4.Интеграция с шаблоном: Для лучшего размещения гирлянды укажите точный селектор шапки вашего сайта.

Заключение

Мы создали полноценный модуль с тремя новогодними эффектами и гибкими настройками. Модуль следует стандартам разработки Битрикс:

  • ✅ Правильная структура папок
  • ✅ Использование Option для хранения настроек
  • ✅ Регистрация обработчиков событий
  • ✅ Подключение assets через Asset
  • ✅ Страница настроек в админке

Код модуля легко расширяется — можно добавить новые типы украшений, дополнительные эффекты (падающие подарки, конфетти) или интеграцию с другими модулями.

Скачать полный исходный код модуля можно в нашем Telegram канале. Подписывайтесь, чтобы не пропустить новые материалы!

Поделиться в Telegram Все статьи
Опубликовано 4 дня назад
Вернуться к блогу