Banner Interscroller HTML5

Описание

Шаблон работает только на кодах вставок, использующих библиотеку loader.js - в инструкции такие коды имеют пометку NEW.

Banner Interscroller HTML5 - отображает содержимое с использованием параллакс эффекта.
Интерактивный баннер, размещенный под контентом сайта. Параллакс эффект при скролле страницы создает впечатление, что баннер, прерывая контент сайта, начинает показываться с нижней части, по мере скролла постепенно раскрываясь вверх, и также плавно скрываясь снова под контентом сайта.
В нижней части баннера расположена плашка с уведомлением, что это реклама.

С помощью одного шаблона "Banner Interscroller HTML5" можно добавить баннер с разным содержимым:
1. HTML креатив.
2. Изображение.

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

Есть возможность реализовать отображение баннера на весь экран (на середине прокрутки баннера он займет всю ширину и высоту окна браузера). Для этого требуется:
1. Использовать относительные единицы при добавлении баннера в интерфейсе: 100vw и 100vh.
2. Добавить код вставки для баннера в верстку сайта так, чтобы он не был ограничен размерами родительского элемента.

Код вставки на сайте имеет контейнер для баннера, в который выгружается код баннера. Например:

<div id="adfox_150344285900533152"></div>

Код баннера оборачивается еще в один контейнер-окно, внутри которого показывается креатив (баннер) и плашка со словом "Реклама" высотой 20px.

При добавлении баннера в ADFOX необходимо указывать размеры (ширину и высоту) как контейнера-окна, так и самого креатива (баннера).
Если размер креатива больше размера контейнера-окна, то креатив будет скроллится, относительно положения контейнера-окна в экране браузера.
Если размер креатива меньше, то он будет выровнен по центру контейнера-окна.

На сайте в итоге получается конструкция:

div контейнер для баннера от кода вставки
    контейнер-окно для баннера, размеры которого задаются в параметрах баннера
        код баннера

Требования к HTML коду (для разработчиков кода)

Для подготовки проекта с HTML5 креативом рекомендуем воспользоваться готовой инструкцией для редакторов:
Adobe Animate CC;
Google Web Designer.

Пример готового проекта в Adobe Animate CC, исходный файл.

Требования к изображению

Допустимые форматы изображений: png, gif, jpg.
Максимальный вес одного файла: 300Кб.

Добавление баннера в ADFOX

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон "Banner Interscroller HTML5 [loader]".

Укажите параметры баннера:

  1. Архив с HTML5 креативом - загрузите .zip архив с проектом.

  2. Ссылка на промерочный пиксель — по умолчанию используется пиксель ADFOX //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе, удалите пиксель ADFOX и укажите другую ссылку.

  3. URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).

  4. HTML5 (css, html, js) — содержимое .html кода из архива с проектом (загружается автоматически из архива). Если HTML5 код не задан, то загрузите изображение для баннера.
    Для креатива кликабельная только область внутри креатива.

  5. Текст на нижней плашке — текст на плашке внизу баннера. По умолчанию - "Реклама". Высота плашки 20px.

    Для всех параметров ширины и высоты возможно указание следующих величин с указанием размерности:
    px — значение ширины или высоты в пикселях, например: 400px;
    % — значение ширины или высоты в процентах, рассчитывается от размеров элемента-родителя, например: 100%;
    vw — относительные единицы измерения, вычисляются относительно размеров окна браузера, например: 100vw - это 100% от ширины экрана браузера;
    vh — относительные единицы измерения, вычисляются относительно размеров окна браузера, например: 100vh - это 100% от высоты экрана браузера;
    number — целочисленные значения, без указания размерности. Размер будет автоматически подобран в указанных пропорциях относительно 100% от ширины элемента контейнера. Например: если указать размеры width=3 height=4 при ширине элемента контейнера в 320px – то высота контейнера станет равной 426px.

  6. Ширина контейнера-окна (px, %, vh, vw, number) — если значение указано в процентах, то за 100% принимается ширина контейнера от кода вставки баннера. Если значение не указано, то значение будет равно 100% от ширины контейнера.

  7. Высота контейнера-окна (px, %, vh, vw, number) — укажите высоту контейнера-окна. Учитывая высоту плашки со словом "Реклама" в нижней части контейнера-окна, рекомендуем высоту контейнера-окна указывать на 20px больше высоты баннера.

  8. Ширина баннера (px, %, vh, vw, number) — если значение указано в процентах, то за 100% принимается ширина контейнера-окна. Если значение не указано, то значение будет равно 100% от ширины контейнера-окна.

  9. Высота баннера (px, %, vh, vw, number) — если значение указано в процентах, то за 100% принимается высота контейнера-окна.

  10. autoScroll — возможность баннера докручиваться на полный экран, если его видимая часть превышает 4/5 экрана:
    yes — докручивать баннер;
    no — не докручивать баннер.

  11. Расположение изображения (contain, cover) — укажите вариант расположения изображения внутри баннера и как оно будет масштабироваться. Возможные значения:
    contain — размер баннера будет таким, как его указал рекламодатель и не зависит от размера контейнера. Если размер изображения больше размера баннера, изображение будет пропорционально отмасштабировано таким образом, чтобы вся площадь баннера была занята изображением. Центр изображения будет расположен по центру блока. Обязательно должны быть указана высота баннера;
    cover — размер баннера будет таким, как его указал рекламодатель и не зависит от размера контейнера. Если размер изображения больше размера баннера, изображение будет пропорционально отмасштабировано таким образом, чтобы изображение было полностью видно. Свободные от изображения области будут прозрачными. Центр изображения будет расположен по центру блока. Обязательно должны быть указана высота баннера.

  12. Изображение — загрузите изображение или укажите ссылку на файл изображения.

  13. Имя атрибута class контейнера баннера — при необходимости укажите имя (или несколько имён через пробел) для атрибута class контейнера с баннером.