Banner Interscroller HTML5
Описание
Banner Interscroller HTML5 отображает содержимое с использованием параллакс-эффекта.
Интерактивный баннер, размещенный под контентом сайта. Параллакс эффект при скролле страницы создает впечатление, что баннер, прерывая контент сайта, начинает показываться с нижней части, по мере скролла постепенно раскрываясь вверх, и также плавно скрываясь снова под контентом сайта.
В нижней части баннера расположена плашка с уведомлением, что это реклама. Плашка не показывается, если включена рекламная метка.
С помощью одного шаблона Banner Interscroller HTML5 можно добавить баннер с разным содержимым:
- HTML-креатив;
- изображение.
Формат доступен для десктопа и мобильных устройств и рекомендуется к использованию в контенте сайта, в статьях.
Есть возможность реализовать отображение баннера на весь экран (на середине прокрутки баннера он займет всю ширину и высоту окна браузера). Для этого требуется:
- Использовать относительные единицы при добавлении баннера в интерфейсе: 100 vw и 100 vh.
- Добавить код вставки для баннера в верстку сайта так, чтобы он не был ограничен размерами родительского элемента.
Код вставки на сайте имеет контейнер для баннера, в который выгружается код баннера. Например:
<div id="adfox_150344285900533152"></div>
Код баннера оборачивается еще в один контейнер-окно, внутри которого показывается креатив (баннер) и плашка со словом «Реклама» высотой 20 px (если не включена рекламная метка).
При добавлении баннера в Adfox необходимо указывать размеры (ширину и высоту) как контейнера-окна, так и самого креатива (баннера).
Если размер креатива больше размера контейнера-окна, креатив будет скроллиться относительно положения контейнера-окна в экране браузера.
Если размер креатива меньше, он будет выровнен по центру контейнера-окна.
На сайте в итоге получается конструкция:
div контейнер для баннера от кода вставки
контейнер-окно для баннера, размеры которого задаются в параметрах баннера
код баннера
Требования к HTML коду (для разработчиков кода)
Для подготовки проекта с HTML5-креативом рекомендуем воспользоваться готовой инструкцией для редакторов:
Пример готового проекта с одной кнопкой в Adobe Animate CC, исходный файл.
Примечание
Эффект параллакса в интерскроллере достигается за счет CSS-свойства position: fixed. Поэтому для корректной работы эффекта на любом из родительских элементов баннера не должны использоваться свойства transform, perspective или filter. Подробнее о CSS-свойстве position: fixed.
Требования к изображению
Допустимые форматы изображений: PNG, GIF, JPG.
Максимальный вес одного файла: 300 КБ.
Добавление баннера в Adfox
Чтобы добавить баннер в Adfox, выберите нужный тип баннера и шаблон Banner Interscroller HTML5 [context].
Укажите параметры баннера:
|
Параметр |
Описание |
|
HTML5 код креатива |
Загрузите ZIP-архив с проектом. |
|
Ссылка на промерочный пиксель |
По умолчанию используется пиксель Adfox |
|
URL перехода |
Ссылка на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке ( |
|
HTML5 (CSS, HTML, JS) |
Содержимое HTML-кода из архива с проектом (загружается автоматически из архива). Если HTML5-код не задан, загрузите изображение для баннера. Для креатива кликабельная только область внутри креатива. |
|
Текст на нижней плашке |
Текст на плашке внизу баннера. По умолчанию — «Реклама». Высота плашки 20 px. Не показывается при включении новой рекламной метки. Для всех параметров ширины и высоты возможно указание следующих величин с указанием размерности:
|
|
Ширина вьюпорта (px, %, vh, vw, number) |
Если значение указано в процентах, за 100% принимается ширина контейнера от кода вставки баннера. Если значение не указано, значение будет равно 100% от ширины контейнера. |
|
Высота вьюпорта (px, %, vh, vw, number) |
Высота контейнера-окна. Учитывая высоту плашки со словом «Реклама» в нижней части контейнера-окна, рекомендуем высоту контейнера-окна указывать на 20 px больше высоты баннера. |
|
Ширина баннера (px, %, vh, vw, number) |
Если значение указано в процентах, за 100% принимается ширина контейнера-окна. Если значение не указано, значение будет равно 100% от ширины контейнера-окна. |
|
Высота баннера (px, %, vh, vw, number) |
Если значение указано в процентах, за 100% принимается высота контейнера-окна. |
|
autoScroll (yes|no) |
Возможность баннера докручиваться на полный экран, если его видимая часть превышает 4/5 экрана:
|
|
Расположение изображения (contain, cover) |
Укажите вариант расположения изображения внутри баннера и как оно будет масштабироваться. Возможные значения:
|
|
Изображение |
Загрузите изображение или укажите ссылку на файл изображения. |
|
Имя атрибута class контейнера баннера |
При необходимости укажите имя (или несколько имен через пробел) для атрибута |
|
advStyle |
Стиль CSS для оформления кнопки «Реклама». |
|
Текст на рекламной метке |
Текст рекламной метки. По умолчанию будет указано «Реклама». |
|
Настройка рекламной метки:
|
В списке Метка рекламы выберите Примечание Добавление метки «Соцреклама» не определяет креатив как социальную рекламу. Чтобы креатив был маркирован как социальная реклама в ЕРИР, необходимо включить опцию Договор социальной рекламы в соответствующем договоре с конечным рекламодателем. В поле Домен укажите домен рекламодателя — он будет добавлен в метку: «Реклама | example.com» или «Соцреклама | example.com» (только если в выпадающем списке выбрано значение Примечание Если вы настроите рекламную метку, то текст «Реклама» на нижней плашке будет отключен. |
|
Добавить рекламное меню |
Чтобы добавить токен на некликабельный баннер, в настройках баннера включите опцию Добавить рекламное меню. При показе баннера на нем будет отображаться значок меню В рекламном меню находится ссылка на правила применения рекомендательных технологий. Она необходима, чтобы соблюсти требования п. 3 ч. 1 ст. 10.2-2 Федерального закона от 27.07.2006 N 149-ФЗ «Об информации, информационных технологиях и о защите информации». Примечание Если баннер некликабельный (поле URL перехода не заполнено) и подлежит маркировке, вы можете включить рекламное меню: так токен будет доступен при показе баннера. |
|
Маркировка рекламы |
Раздел Маркировка рекламы доступен, только если в настройках рекламной кампании выбран порядок маркировки Передавать данные в ЕРИР. Заполните поля в этом разделе, чтобы зарегистрировать креатив в ОРД Яндекса. Токен будет присвоен креативу автоматически. Примечание Если к конкретному баннеру маркировка не применяется, в этом поле выберите Не передавать данные в ЕРИР. |
в правом верхнем углу. По клику на значок откроется информация о рекламодателе и кнопка для копирования токена (если для баннера включена маркировка или указан сторонний токен).