Битрикс24
Параллакс Баннер
от OX8.RU ox8ru.parallaxbanner
4 500 ₽
Электронная передача по России, без платы за доставку, после подтверждения заказа и не позже 5 дней. Условия.
Скриншоты
Технические данные
- Опубликовано:
- 02.10.2026
- Версия:
- 1.0.0
- Установлено:
- Менее 50 раз
- Подходящие редакции:
- «Первый сайт», «Старт», «Стандарт», «Малый бизнес», «Бизнес», «Интернет-магазин + CRM»
- Адаптивность:
- Да
- Поддержка Композита:
- Да
- Совместимо с Сайты24
- Нет
Многослойный баннер с параллаксом по движению курсора и ротацией слайдов.
Без jQuery и сторонних библиотек. Совместим со стандартными шаблонами и с решениями вроде Aspro.
Баннер собирается из пяти независимых слоёв, которые реагируют на курсор с разной амплитудой — так получается ощущение глубины:
1. Фон — статичный, не двигается (небо, градиент).
2. Дальний план — двигается слабо.
3. Средний план.
4. Ближний план — двигается сильнее всех.
5. Нижняя полоса — повторяющаяся плитка до краёв экрана (волны, трава, лента).
Поверх слоёв выводится содержимое: текст или картинка, с выбором положения.
Несколько баннеров собираются в слайдер с автосменой, стрелками и точками.
Ни один слой не обязателен. Можно сделать обычный плоский баннер: только фон и картинка с текстом акции.
Без jQuery и сторонних библиотек. Совместим со стандартными шаблонами и с решениями вроде Aspro.
Баннер собирается из пяти независимых слоёв, которые реагируют на курсор с разной амплитудой — так получается ощущение глубины:
1. Фон — статичный, не двигается (небо, градиент).
2. Дальний план — двигается слабо.
3. Средний план.
4. Ближний план — двигается сильнее всех.
5. Нижняя полоса — повторяющаяся плитка до краёв экрана (волны, трава, лента).
Поверх слоёв выводится содержимое: текст или картинка, с выбором положения.
Несколько баннеров собираются в слайдер с автосменой, стрелками и точками.
Ни один слой не обязателен. Можно сделать обычный плоский баннер: только фон и картинка с текстом акции.
# Параллакс Баннер — первый запуск за 15 минут
Эта инструкция — для тех, кто раньше не ставил модули и не добавлял компоненты на страницу.
Мы пройдём весь путь от установки до баннера на сайте. Программировать ничего не придётся.
Полное описание всех настроек — в файле `README.md` рядом. Но для начала хватит этой страницы.
---
## Несколько слов, чтобы говорить на одном языке
"Модуль" Дополнение к сайту. Ставится один раз, как программа на компьютер
"Инфоблок" Таблица в админке, где хранятся баннеры. Модуль создаст её сам
"Слайдер" Папка внутри инфоблока. В ней лежат баннеры, которые сменяют друг друга
"Баннер" Одна запись в папке: картинки, текст, ссылка
"Компонент" «Окно» на странице сайта, которое показывает слайдер. Ставится туда, где нужен баннер
Итого у нас четыре шага: "поставить модуль → создать слайдер → добавить баннер → поставить компонент на страницу."
---
## Что понадобится
- доступ в админку сайта с правами администратора;
- хотя бы одна картинка для баннера (для первой пробы подойдёт любая широкая фотография).
Админка открывается по адресу `https://ваш-сайт.ru/bitrix/admin/`.
---
## Шаг 1. Поставить модуль
### Вы получили модуль в Маркетплейсе
1. В админке откройте "Marketplace → Каталог решений".
2. Найдите в поиске «Параллакс Баннер» и нажмите "Установить".
3. Система скачает модуль и сама предложит его установить. Соглашайтесь.
### Что произойдёт после установки
Появится сообщение «Модуль установлен» и номер созданного инфоблока. Больше ничего
настраивать не нужно: модуль сам создал место для баннеров и сам его запомнил.
---
## Шаг 2. Создать слайдер
Слайдер — это папка, в которую мы будем складывать баннеры.
1. В админке откройте "Контент → Параллакс Баннер → Баннеры с параллаксом".
(Если не можете найти — есть короткий путь: "Настройки → Настройки продукта →
Настройки модулей → Параллакс Баннер", там ссылка "«Открыть слайдеры»".)
2. Нажмите кнопку "Добавить раздел".
3. Заполните два поля:
- "Название" — любое, например «Главная». Его видите только вы.
- "Символьный код" — короткое имя латиницей без пробелов, например `main`.
"Запишите его" — оно понадобится на шаге 4.
4. Остальные поля (высота, автосмена, стрелки) пока не трогайте — пустые поля
значат «взять хорошие значения по умолчанию».
5. Нажмите "Сохранить".
---
## Шаг 3. Добавить первый баннер
Для первого раза сделаем самый простой баннер: фоновая картинка и надпись поверх неё.
Красивый объёмный эффект со слоями добавите потом, когда убедитесь, что всё работает.
1. Откройте только что созданный слайдер (нажмите на его название в списке).
2. Нажмите "Добавить элемент" (элемент — это и есть баннер).
3. Заполните:
- "Название" — это текст, который появится на баннере. Например: «Скидки до 30% всю неделю».
- "Фоновое статичное изображение" — нажмите «Добавить файл» и выберите картинку
с компьютера. Лучше широкую, от 1920 пикселей по ширине.
- "Ссылка со всего баннера" — куда переходить по клику, например `/catalog/`.
Можно оставить пустым.
4. Нажмите "Сохранить".
Не видите какого-то поля? В форме баннера бывает несколько вкладок сверху —
картинки обычно на вкладке со свойствами («Элемент» или «Свойства»).
---
## Шаг 4. Поставить компонент на страницу
Сейчас баннер лежит в админке, но на сайте его ещё нет. Чтобы он появился, нужно
поставить на страницу компонент и подсказать ему код слайдера из шага 2.
Есть два способа. Выберите любой.
### Способ А — мышкой, в визуальном редакторе (без кода)
Подходит для обычных страниц сайта: «О компании», «Акции», новая посадочная и т.п.
1. Откройте нужную страницу "на самом сайте" (не в админке), будучи авторизованным
администратором. Сверху появится серая панель управления.
2. На панели нажмите "Изменить страницу → В визуальном редакторе".
3. Откроется редактор. Справа найдите вкладку "Компоненты", в ней — группу "ox8.ru".
4. Внутри будет "Параллакс баннер". Зажмите его мышкой и перетащите в то место
страницы, где должен быть баннер. На странице появится серый значок компонента.
5. Дважды щёлкните по этому значку — откроются параметры. Параметр тут всего один:
"«Символьный код или ID слайдера»". Впишите туда код из шага 2 — например `main`.
6. Нажмите "Сохранить" в окне параметров, а потом — "Сохранить" в самом редакторе.
Все остальные настройки (высота, скорость смены, стрелки) компонент сам берёт из админки.
Возвращаться сюда, чтобы что-то поменять, больше не придётся.
### Способ Б — вставить готовый фрагмент кода
Подходит, если визуальный редактор не открывается или вы правите страницу через «Изменить страницу
→ В редакторе PHP-кода». Скопируйте и вставьте этот фрагмент в нужное место страницы:
```php
<?$APPLICATION->IncludeComponent(
'ox8ru:parallaxbanner',
'',
array(
'SLIDER_CODE' => 'main',
),
false
);?>
```
Если на шаге 2 вы придумали другой код — замените `main` на него. Больше в фрагменте менять ничего не нужно.
Сохраните страницу.
### Если баннер нужен на главной странице готового решения (Аспро и подобные)
В готовых решениях главная собирается из готовых блоков, и баннер уже сидит в своём блоке.
Самый надёжный путь — попросить разработчика заменить в блоке баннера старый вызов на
фрагмент из способа Б. Для разработчика подсказка: старый вызов убирать целиком
или оборачивать в `/* */`, но не комментировать строками `//` — иначе на главной
может появиться лишний символ `?>`.
---
## Шаг 5. Проверить
Откройте страницу на сайте. Должен появиться баннер с вашей картинкой и надписью.
Не появился? Сайт мог показать сохранённую старую копию страницы. Добавьте к адресу
в браузере `?clear_cache=Y` (например `https://ваш-сайт.ru/?clear_cache=Y`) и обновите —
это работает, когда вы авторизованы администратором.
Если и это не помогло — пройдитесь по списку ниже.
---
## Проблемы новичка и что с ними делать
"В визуальном редакторе нет группы «ox8.ru»."
Модуль не установлен до конца. Проверьте в "Marketplace → Установленные решения",
что у «Параллакс Баннера» статус «Установлен». Если да — закройте редактор и откройте
снова, список компонентов обновится.
"Компонент на месте, а баннера нет — пустое место."
Почти всегда это одна из трёх причин:
1. код в компоненте не совпадает с «Символьным кодом» слайдера — сверьте буква в букву;
2. у слайдера или баннера снята галка "«Активность»";
3. баннер лежит не в том слайдере — откройте слайдер и проверьте, что баннер внутри.
"Изменил баннер в админке — на сайте старый."
Откройте страницу с `?clear_cache=Y` (см. шаг 5).
"Хочу убрать баннер со страницы."
На время — снимите галку «Активность» у слайдера: компонент останется, но ничего не
покажет. Насовсем — откройте страницу в визуальном редакторе, выделите значок
компонента и нажмите Delete, затем Сохранить.
"Хочу показать разные баннеры на разных страницах."
Создайте второй слайдер со своим кодом (например `promo`) и на другой странице
укажите в компоненте этот код.
---
## Что дальше
Баннер работает — теперь его можно улучшать. Всё делается в админке, компонент на
странице трогать больше не нужно:
- "Смена баннеров." Добавьте в тот же слайдер второй баннер — появятся стрелки, точки
и автоматическая смена. Порядок задаётся полем «Сортировка».
- "Объёмный эффект." Загрузите картинки 1-го, 2-го и 3-го планов — они начнут
двигаться за курсором с разной скоростью. Как готовить такие картинки — в `README.md`,
раздел «Главное правило подготовки слоёв».
- "Картинка для телефонов." Заполните у баннера поле «Картинка для мобильных» —
на телефоне будет показываться она, вертикальная и без обрезки.
- "Высота и поведение." Откройте слайдер на редактирование: там высота баннера, скорость
смены, стрелки и точки.
Подробно каждая настройка описана в `README.md`.
Эта инструкция — для тех, кто раньше не ставил модули и не добавлял компоненты на страницу.
Мы пройдём весь путь от установки до баннера на сайте. Программировать ничего не придётся.
Полное описание всех настроек — в файле `README.md` рядом. Но для начала хватит этой страницы.
---
## Несколько слов, чтобы говорить на одном языке
"Модуль" Дополнение к сайту. Ставится один раз, как программа на компьютер
"Инфоблок" Таблица в админке, где хранятся баннеры. Модуль создаст её сам
"Слайдер" Папка внутри инфоблока. В ней лежат баннеры, которые сменяют друг друга
"Баннер" Одна запись в папке: картинки, текст, ссылка
"Компонент" «Окно» на странице сайта, которое показывает слайдер. Ставится туда, где нужен баннер
Итого у нас четыре шага: "поставить модуль → создать слайдер → добавить баннер → поставить компонент на страницу."
---
## Что понадобится
- доступ в админку сайта с правами администратора;
- хотя бы одна картинка для баннера (для первой пробы подойдёт любая широкая фотография).
Админка открывается по адресу `https://ваш-сайт.ru/bitrix/admin/`.
---
## Шаг 1. Поставить модуль
### Вы получили модуль в Маркетплейсе
1. В админке откройте "Marketplace → Каталог решений".
2. Найдите в поиске «Параллакс Баннер» и нажмите "Установить".
3. Система скачает модуль и сама предложит его установить. Соглашайтесь.
### Что произойдёт после установки
Появится сообщение «Модуль установлен» и номер созданного инфоблока. Больше ничего
настраивать не нужно: модуль сам создал место для баннеров и сам его запомнил.
---
## Шаг 2. Создать слайдер
Слайдер — это папка, в которую мы будем складывать баннеры.
1. В админке откройте "Контент → Параллакс Баннер → Баннеры с параллаксом".
(Если не можете найти — есть короткий путь: "Настройки → Настройки продукта →
Настройки модулей → Параллакс Баннер", там ссылка "«Открыть слайдеры»".)
2. Нажмите кнопку "Добавить раздел".
3. Заполните два поля:
- "Название" — любое, например «Главная». Его видите только вы.
- "Символьный код" — короткое имя латиницей без пробелов, например `main`.
"Запишите его" — оно понадобится на шаге 4.
4. Остальные поля (высота, автосмена, стрелки) пока не трогайте — пустые поля
значат «взять хорошие значения по умолчанию».
5. Нажмите "Сохранить".
---
## Шаг 3. Добавить первый баннер
Для первого раза сделаем самый простой баннер: фоновая картинка и надпись поверх неё.
Красивый объёмный эффект со слоями добавите потом, когда убедитесь, что всё работает.
1. Откройте только что созданный слайдер (нажмите на его название в списке).
2. Нажмите "Добавить элемент" (элемент — это и есть баннер).
3. Заполните:
- "Название" — это текст, который появится на баннере. Например: «Скидки до 30% всю неделю».
- "Фоновое статичное изображение" — нажмите «Добавить файл» и выберите картинку
с компьютера. Лучше широкую, от 1920 пикселей по ширине.
- "Ссылка со всего баннера" — куда переходить по клику, например `/catalog/`.
Можно оставить пустым.
4. Нажмите "Сохранить".
Не видите какого-то поля? В форме баннера бывает несколько вкладок сверху —
картинки обычно на вкладке со свойствами («Элемент» или «Свойства»).
---
## Шаг 4. Поставить компонент на страницу
Сейчас баннер лежит в админке, но на сайте его ещё нет. Чтобы он появился, нужно
поставить на страницу компонент и подсказать ему код слайдера из шага 2.
Есть два способа. Выберите любой.
### Способ А — мышкой, в визуальном редакторе (без кода)
Подходит для обычных страниц сайта: «О компании», «Акции», новая посадочная и т.п.
1. Откройте нужную страницу "на самом сайте" (не в админке), будучи авторизованным
администратором. Сверху появится серая панель управления.
2. На панели нажмите "Изменить страницу → В визуальном редакторе".
3. Откроется редактор. Справа найдите вкладку "Компоненты", в ней — группу "ox8.ru".
4. Внутри будет "Параллакс баннер". Зажмите его мышкой и перетащите в то место
страницы, где должен быть баннер. На странице появится серый значок компонента.
5. Дважды щёлкните по этому значку — откроются параметры. Параметр тут всего один:
"«Символьный код или ID слайдера»". Впишите туда код из шага 2 — например `main`.
6. Нажмите "Сохранить" в окне параметров, а потом — "Сохранить" в самом редакторе.
Все остальные настройки (высота, скорость смены, стрелки) компонент сам берёт из админки.
Возвращаться сюда, чтобы что-то поменять, больше не придётся.
### Способ Б — вставить готовый фрагмент кода
Подходит, если визуальный редактор не открывается или вы правите страницу через «Изменить страницу
→ В редакторе PHP-кода». Скопируйте и вставьте этот фрагмент в нужное место страницы:
```php
<?$APPLICATION->IncludeComponent(
'ox8ru:parallaxbanner',
'',
array(
'SLIDER_CODE' => 'main',
),
false
);?>
```
Если на шаге 2 вы придумали другой код — замените `main` на него. Больше в фрагменте менять ничего не нужно.
Сохраните страницу.
### Если баннер нужен на главной странице готового решения (Аспро и подобные)
В готовых решениях главная собирается из готовых блоков, и баннер уже сидит в своём блоке.
Самый надёжный путь — попросить разработчика заменить в блоке баннера старый вызов на
фрагмент из способа Б. Для разработчика подсказка: старый вызов убирать целиком
или оборачивать в `/* */`, но не комментировать строками `//` — иначе на главной
может появиться лишний символ `?>`.
---
## Шаг 5. Проверить
Откройте страницу на сайте. Должен появиться баннер с вашей картинкой и надписью.
Не появился? Сайт мог показать сохранённую старую копию страницы. Добавьте к адресу
в браузере `?clear_cache=Y` (например `https://ваш-сайт.ru/?clear_cache=Y`) и обновите —
это работает, когда вы авторизованы администратором.
Если и это не помогло — пройдитесь по списку ниже.
---
## Проблемы новичка и что с ними делать
"В визуальном редакторе нет группы «ox8.ru»."
Модуль не установлен до конца. Проверьте в "Marketplace → Установленные решения",
что у «Параллакс Баннера» статус «Установлен». Если да — закройте редактор и откройте
снова, список компонентов обновится.
"Компонент на месте, а баннера нет — пустое место."
Почти всегда это одна из трёх причин:
1. код в компоненте не совпадает с «Символьным кодом» слайдера — сверьте буква в букву;
2. у слайдера или баннера снята галка "«Активность»";
3. баннер лежит не в том слайдере — откройте слайдер и проверьте, что баннер внутри.
"Изменил баннер в админке — на сайте старый."
Откройте страницу с `?clear_cache=Y` (см. шаг 5).
"Хочу убрать баннер со страницы."
На время — снимите галку «Активность» у слайдера: компонент останется, но ничего не
покажет. Насовсем — откройте страницу в визуальном редакторе, выделите значок
компонента и нажмите Delete, затем Сохранить.
"Хочу показать разные баннеры на разных страницах."
Создайте второй слайдер со своим кодом (например `promo`) и на другой странице
укажите в компоненте этот код.
---
## Что дальше
Баннер работает — теперь его можно улучшать. Всё делается в админке, компонент на
странице трогать больше не нужно:
- "Смена баннеров." Добавьте в тот же слайдер второй баннер — появятся стрелки, точки
и автоматическая смена. Порядок задаётся полем «Сортировка».
- "Объёмный эффект." Загрузите картинки 1-го, 2-го и 3-го планов — они начнут
двигаться за курсором с разной скоростью. Как готовить такие картинки — в `README.md`,
раздел «Главное правило подготовки слоёв».
- "Картинка для телефонов." Заполните у баннера поле «Картинка для мобильных» —
на телефоне будет показываться она, вертикальная и без обрезки.
- "Высота и поведение." Откройте слайдер на редактирование: там высота баннера, скорость
смены, стрелки и точки.
Подробно каждая настройка описана в `README.md`.