Создание модуля новогодних украшений для Битрикс
Новогоднее настроение на сайте — это не просто красивая деталь, а важный элемент взаимодействия с посетителями. В праздничный сезон пользователи ожидают увидеть что-то особенное: падающий снег, мерцающие гирлянды, забавные украшения. Такие мелочи создают тёплую атмосферу, повышают лояльность и выделяют ваш сайт среди конкурентов.
Автор
Содержание
Вместо того чтобы каждый год искать готовые решения или вставлять скрипты вручную, мы создадим собственный модуль с удобными настройками в админке. Один раз настроил — и каждый декабрь просто включаешь!
В этой статье мы рассмотрим, как создать собственный модуль для добавления новогодних эффектов на сайт под управлением 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.moduleMODULE_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. Мы организуем настройки в три вкладки:
- Снег — включение, интенсивность, скорость, размер снежинок
- Гирлянда — включение, CSS-селектор, цвета, скорость мигания, отступ от шапки
- Украшения — включение, 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); // Изменить интенсивность
Установка модуля
- Скопируйте папку
newyear.effectsв/local/modules/ - Перейдите в админку: Настройки → Marketplace → Установленные решения
- Найдите модуль «Новогодние эффекты» и нажмите «Установить»
- Настройте эффекты: Настройки → Настройки продукта → Настройки модулей → Новогодние эффекты
Советы по использованию
1.Производительность: При высокой интенсивности снега на слабых устройствах возможны лаги. Рекомендуется интенсивность 30-50.
2.Мобильные устройства: Эффекты работают на мобильных, но можно добавить проверку @media для отключения на маленьких экранах.
3.Периодичность: Модуль можно включать только на период праздников, изменяя настройку *_enabled.
4.Интеграция с шаблоном: Для лучшего размещения гирлянды укажите точный селектор шапки вашего сайта.
Мы создали полноценный модуль с тремя новогодними эффектами и гибкими настройками. Модуль следует стандартам разработки Битрикс:
- Правильная структура папок
- Использование
Optionдля хранения настроек - Регистрация обработчиков событий
- Подключение assets через
Asset - Страница настроек в админке
Код модуля легко расширяется — можно добавить новые типы украшений, дополнительные эффекты (падающие подарки, конфетти) или интеграцию с другими модулями.
Скачать полный исходный код модуля можно в нашем Telegram канале. Подписывайтесь, чтобы не пропустить новые материалы!
Не сходится?
Спросите Домового: он знает документацию и материалы сайта по этой теме. Ответит сразу.
Нужен живой разбор?
Консультация автора BXMax: созвон один на один, 90 минут на вашу задачу по теме «Создание модуля новогодних украшений для Битрикс».
Комментарии (0)
Пожалуйста, войдите в аккаунт, чтобы оставить комментарий
Оставить комментарийЗагрузка...
Пока нет ни одного комментария. Будьте первым!
Похожие статьи
Как правильно подключать статику в Bitrix: версионирование, Asset API и ES-модули
Программное создание email-рассылки в 1С-Битрикс: кампании, сегменты, контакты и шаблоны
