Banner Interscroller HTML5

Описание

Banner Interscroller HTML5 — отображает содержимое с использованием параллакс-эффекта.

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

В нижней части баннера расположена плашка с уведомлением, что это реклама.

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

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

Есть возможность реализовать отображение баннера на весь экран (на середине прокрутки баннера он займет всю ширину и высоту окна браузера). Для этого требуется:

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

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

<divid="adfox_150344285900533152"></div>

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

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

Если размер креатива больше размера контейнера-окна, креатив будет скроллится, относительно положения контейнера-окна в экране браузера.

Если размер креатива меньше, он будет выровнен по центру контейнера-окна.

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

div контейнер для баннера от кода вставки
    контейнер-окно для баннера, размеры которого задаются в параметрах баннера
        код баннера
Примечание. Использование CSS-свойства transform для любого из родителей контейнера может привести к неправильному позиционированию баннера.

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

Для подготовки проекта с HTML5-креативом рекомендуем воспользоваться готовой инструкцией для редакторов:

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

Примечание. Эффект параллакса в интерскроллере достигается за счет CSS-свойства position: fixed. Поэтому для корректной работы эффекта на любом из родительских элементов баннера не должны использоваться свойства transform, perspective или filter. Подробнее о CSS-свойстве position: fixed.

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

Допустимые форматы изображений: 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. Текст на нижней плашке — текст на плашке внизу баннера. По умолчанию — «Реклама». Высота плашки 20 px.

    Для всех параметров ширины и высоты возможно указание следующих величин с указанием размерности:

    • px — значение ширины или высоты в пикселях, например: 400 px;
    • % — значение ширины или высоты в процентах, рассчитывается от размеров элемента-родителя, например: 100%;
    • vw — относительные единицы измерения, вычисляются относительно размеров окна браузера, например: 100vw — это 100% от ширины экрана браузера;
    • vh — относительные единицы измерения, вычисляются относительно размеров окна браузера, например: 100vh — это 100% от высоты экрана браузера;
    • number — целочисленные значения, без указания размерности. Размер будет автоматически подобран в указанных пропорциях относительно 100% от ширины элемента контейнера. Например: если указать размеры width=3 height=4 при ширине элемента контейнера в 320 px — то высота контейнера станет равной 426 px.
  6. Ширина контейнера-окна (px, %, vh, vw, number) — если значение указано в процентах, за 100% принимается ширина контейнера от кода вставки баннера. Если значение не указано, значение будет равно 100% от ширины контейнера.
  7. Высота контейнера-окна (px, %, vh, vw, number) — укажите высоту контейнера-окна. Учитывая высоту плашки со словом «Реклама» в нижней части контейнера-окна, рекомендуем высоту контейнера-окна указывать на 20 px больше высоты баннера.
  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 контейнера с баннером.
  14. advStyle — укажите стиль CSS для оформления кнопки «Реклама».