Управление DOM-структурой в 1С-Битрикс: мастерим прозрачность с BX.setOpacity

В современной веб-разработке управление визуальными элементами играет ключевую роль в создании интерактивных и привлекательных пользовательских интерфейсов. В этой статье мы рассмотрим, как использовать метод BX.setOpacity в 1С-Битрикс для управления прозрачностью элементов DOM. Это позволит вам создавать эффекты наведения, плавные появления и исчезновения элементов, а также улучшать общую визуальную иерархию на вашем сайте.

Зачем вообще менять прозрачность?

• Фокус внимания — мягкое затухание второстепенных блоков, когда пользователь концентрируется на главном.
• Интерактивность — подсветка кнопки при наведении или постепенное появление уведомления.
• UX-эффекты — создание модальных окон и лёгкая «дымка» фона под оверлеем.

В Bitrix всё это делается буквально одной строкой — достаточно вызвать BX.setOpacity.

Синтаксис и параметры

BX.setOpacity(
    DOMNode node,     // элемент, над которым работаем
    integer percent   // степень непрозрачности: 0 – полностью прозрачно,
                      // 100 – полностью видно
);

• DOMNode node — объект узла DOM. Чаще всего это BX('myId') либо результат event.target.
• integer percent — целое число от 0 до 100. Интерфейс API не бросит исключение, но при значении выше 100 браузер просто установит 100.

Минимальная инициализация

Вызовите ядро JavaScript Bitrix перед использованием:

<?php
\CJSCore::Init(); // заряжаем BX.js
?>

Затем в HTML-шаблоне разместите элемент-кандидат:

<div id="opacityBox">Привет, я прозрачный на 70 %</div>

И обработчик:

<script>
BX.ready(() => {
    // Сразу после загрузки страницы делаем блок полупрозрачным
    BX.setOpacity(BX('opacityBox'), 70);
});
</script>

Пример 1. Переключаем прозрачность по клику

Полный код:

<?php \CJSCore::Init(); ?>
<style>
  .toggle-btn{
      cursor:pointer;
      display:inline-block;
      padding:10px 18px;
      margin:12px;
      font-size:18px;
      background:#d3e4ff;
      border-radius:6px;
      box-shadow:0 0 6px rgba(0,0,0,.25);
      user-select:none;
  }
</style>
<div id="toggleTarget" class="toggle-btn">Нажми — станет 40 %</div>
<script>
BX.ready(() => {
    const target = BX('toggleTarget');
    BX.bind(target, 'click', function () {
        // Проверяем текущий style.opacity, превращаем его из строки в число
        const current = parseFloat(this.style.opacity || 1) * 100;
        const next = current > 50 ? 40 : 100; // чередуем 40 ↔ 100
        BX.setOpacity(this, next);
    });
});
</script>

Пример 2. Эффект наведения (hover) без CSS-анимаций

Этот способ полезен, когда нужно тонко контролировать скриптом, отключив CSS-transition на мобильных или старых браузерах.

<div id="hoverCard" style="width:320px;height:180px;background:#f8f8f8;
     border:1px solid #ddd;border-radius:8px;text-align:center;line-height:180px;">
    Наведи мышь
</div>
<script>
BX.ready(() => {
    const card = BX('hoverCard');
    BX.bind(card, 'mouseover', () => BX.setOpacity(card, 60));
    BX.bind(card, 'mouseout',  () => BX.setOpacity(card, 100));
});
</script>

Пример 3. Плавное затухание / проявление (fade-in / fade-out)

BX.setOpacity не содержит встроённой анимации. Чтобы добиться плавности, просто меняем значение в цикле setInterval.

<button id="fadeBtn">Медленно исчезаем</button>
<div id="banner" style="background:#ffe8cc;padding:30px;margin-top:10px;">
    Я баннер, и через три секунды меня почти не останется
</div>
<script>
BX.ready(() => {
    const banner = BX('banner');
    let timer;
    BX.bind(BX('fadeBtn'), 'click', () => {
        clearInterval(timer);
        let opacity = 100;               // стартовая непрозрачность
        timer = setInterval(() => {
            opacity -= 4;                // шаг изменения
            BX.setOpacity(banner, opacity);
            if (opacity <= 10) clearInterval(timer);
        }, 120);                         // каждые 120 мс
    });
});
</script>

Пример 4. Создание затемнённого фона под модальным окном

Модальный слой из коробки остаётся видимым, пока не убедитесь, что контент под ним не отвлекает. Используем setOpacity для фона.

<button id="showModal">Открыть модальное окно</button>
<!-- модальное окно -->
<div id="modal" style="display:none;
     position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
     background:#fff;padding:25px 35px;border-radius:10px;z-index:20;">
     <h3>Привет из модального окна</h3>
     <button id="closeModal">Закрыть</button>
</div>
<!-- затемняющий фон -->
<div id="overlay" style="display:none;
     position:fixed;top:0;left:0;width:100%;height:100%;
     background:#000;z-index:10;"></div>
<script>
BX.ready(() => {
    const overlay = BX('overlay');
    const modal   = BX('modal');
    const open = () => {
        overlay.style.display = modal.style.display = 'block';
        BX.setOpacity(overlay, 60);  // лёгкая «дымка»
    };
    const close = () => {
        modal.style.display = overlay.style.display = 'none';
    };
    BX.bind(BX('showModal'),  'click', open);
    BX.bind(BX('closeModal'), 'click', close);
});
</script>

Частые ошибки и как их избежать

Советы по производительности

1. Старайтесь группировать вызовы. Если нужно изменить десяток карточек, первый раз найдите их в DOM:

   const cards = BX.findChildren(document.body, { className: 'card' }, true);
   cards.forEach(el => BX.setOpacity(el, 50));
   

2. Избегайте частых перерисовок. Для плавных анимаций задавайте шаг ≥ 16 мс (один кадр 60 fps).
3. Не путайте с CSS-transition. Аппаратное ускорение opacity через CSS-animation почти всегда быстрее. Используйте JS-вариант, когда нужна точная логика или интеграция с компонентами Bitrix.

Заключение

Метод BX.setOpacity — это инструмент для управления визуальной иерархией на сайте. Он идеально вписывается в экосистему 1С-Битрикс: не требует сторонних библиотек, легко сочетается с BX.bind, BX.ajax и другими модулями ядра.

Берите примеры выше как отправную точку, экспериментируйте с процентами, сочетайте с CSS-transition и создавайте интерфейсы, которые «дышат» вместе с пользователем!