Banner Interscroller HTML5

Description

Banner Interscroller HTML5 displays contents with a parallax effect.

An interactive banner placed under the site content. When you scroll the page, the parallax effect creates the impression that the banner breaks into the site content and starts to open up from the bottom, gradually opens up as the scroll progresses, and then smoothly hides again under the site content.

A bar with a notification that this is an ad is placed at the bottom of the banner. The bar is not displayed if the ad label is enabled.

Using a single Banner Interscroller HTML5 template, you can add a banner with different contents:

  • HTML creative.
  • Image.

The format is available for desktop and mobile devices and is best used in the site content and in articles.

You can also display the banner in full screen mode (in the middle of scrolling, the banner will take up the entire width and height of the browser window). To do this:

  1. Use relative units when adding a banner in the interface: 100 vw and 100 vh.
  2. Add the banner ad tag to the site layout so that it's not limited by the size of the parent element.

Sample banner

The ad tag on the site has a container the banner code is loaded into. For example:

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

The banner code is wrapped in another container window inside which the creative (banner) and a 20 px high bar with the word Advertisement" are displayed (if the ad label is not enabled).

When adding a banner to Adfox, you need to specify the dimensions (width and height) of both the container window and the creative itself (banner).

If the creative is larger than the container window, the creative will scroll relative to the position of the container window in the browser screen.

If the creative is smaller, it will be aligned to the center of the container window.

This will result in the following site layout:

div banner container of ad tag
container window which dimensions are specified in the banner settings
banner code

HTML code requirements (for code developers)

To prepare a project with an HTML5 creative, we recommend using the ready-made manual for editors:

Sample ready-made project with one button in Adobe Animate CC, source file.

Note

The parallax effect in the interscroller is achieved with the position: fixed CSS property. That is why, for the effect to work correctly, you shouldn't use the transform, perspective, or filter properties in any of the parent elements of the banner. Learn more about the position: fixed CSS property.

Image requirements

Acceptable image formats: PNG, GIF, and JPG.

Maximum file size: 300 KB.

Add a banner to Adfox

To add a banner to Adfox, select the necessary banner type and the Banner Interscroller HTML5 [context] template.

Set the banner parameters:

  1. Archive with HTML5 creative: Upload a ZIP archive with the project.

  2. Tracking pixel link: By default, the Adfox //banners.adfox.ru/transparent.gif pixel is used. If you want to count impressions in a third-party system, delete the Adfox pixel and specify another link.

  3. Click URL: Enter the link to the advertiser's site. For the click to work correctly, make sure that the link includes the protocol (http:// or https://).

  4. HTML5 (CSS, HTML, JS): The content of the HTML code from the archived project (loaded from the archive automatically). If the HTML5 code is not specified, upload an image for the banner.

    For a creative, only the area inside the creative is clickable.

  5. Text on the bottom bar: The text on the bar at the bottom of the banner. By default: Advertisement". The height of the text bar is 20 px. It is not displayed when a new ad label is enabled.

    You can use the following units to specify width and height, adding the exact dimensions:

    • px: Width or height in pixels (for example, 400 px).
    • %: Width or height as a percentage of the size of the parent element (for example, 100%).
    • vw: Relative units of measurement calculated relative to the size of the browser window (for example, 100 vw is 100% of the width of the browser screen).
    • vh: Relative units of measurement calculated relative to the size of the browser window (for example: 100 vh is 100% of the height of the browser screen).
    • number: Integer values with no dimension specified. The size will be selected automatically in the specified proportions relative to 100% of the width of the container element. For example, if you specify the dimensions as width=3 height=4, and the width of the container element is 320 px, then the height of the container will be equal to 426 px.

  6. Width of the container window (px, %, vh, vw, number): If the value is specified as a percentage, the width of the container from the banner ad tag is taken as 100%. If no value is specified, the value will be equal to 100% of the width of the container.

  7. Height of the container window (px,%, vh, vw, number): Specify the height of the container window. Given the height of the text bar with the word Advertisement" in the bottom part of the container window, we recommend making the height of the container window larger than the height of the banner by 20 px.

  8. Banner width (px, %, vh, vw, number): If the value is specified as a percentage, the width of the container window is taken as 100%. If no value is specified, the value will be equal to 100% of the width of the container window.

  9. Banner height (px, %, vh, vw, number): If the value is specified as a percentage, the height of the container window is taken as 100%.

  10. autoScroll: The ability of the banner to be scrolled to full screen if its visible part exceeds 4/5 of the screen:

    • yes: Scroll the banner to full screen.
    • no: Don't scroll the banner to full screen.

  11. Image position (contain, cover): Specify where the image is located in the banner and how it's scaled. Acceptable values:

    • contain: The size of the banner is the same as specified by the advertiser and doesn't depend on the size of the container. If the image size is larger than the banner size, the image is scaled proportionally to occupy the entire banner area. The image center is in the center of the unit. You must specify the height of the banner.
    • cover: The size of the banner is the same as specified by the advertiser and doesn't depend on the size of the container. If the image size is larger than the banner size, the image is scaled proportionally so that it's fully visible. The areas where there's no image are transparent. The image center is in the center of the unit. You must specify the height of the banner.

  12. Image: Upload an image or provide a link to the image file.

  13. Name for the class attribute of the banner container: If necessary, enter a name (or multiple names separated by a space) for the class attribute of the banner container.

  14. advStyle: Specify the CSS style for the Advertisement" button design.

  15. Text on the advertising label: Specify the text of the advertising label. By default, Ad" will be specified.

  16. Under Advertising label settings:

    • In the Ad label list, select Ad or Social ad, and the label will be added to the banner. If the creative's design already includes the label, you can keep “Disabled” in the drop-down list.

      Note

      Adding the “Social ad” label doesn't automatically define the creative content as social ad. To label creative content as a social advertisement in the state register, select Social ads contract for the corresponding contract with the end advertiser.

    • In the Domain field, specify the advertiser domain, and it will be added to the label: “Ad | example.com” or “Social ad | example.com” (only if you select Ad or Social ad in the drop-down list).

    Note

    If you set up an ad label, the word Ad" on the bottom bar will be disabled.

  17. To add a token to a non-clickable banner, enable the Show banner menu option in the banner settings. When the banner is served, the menu icon  will be displayed in the upper right corner of it. When a user clicks this icon, the advertiser information and the copy token button appear (if ad register is enabled for the banner and a third-party token is specified).

    The banner menu contains a link to the rules for using recommendation technologies. That is necessary to comply with paragraph 3, section 1, article 10.2-2 of Federal Law No. 149-FZ On information, information technologies, and information protection", dated July 27, 2006.

    Note

    If a banner is non-clickable (the Transition URL field is not filled in) and it is to be added to the ad register, be sure to show the banner menu. This is the only way to make the token available when serving the banner.

  18. Settings for Russian ad register: The section is only available if the Submit data to state register procedure is selected in the campaign settings. Fill in the fields in this section to register the creative in the Yandex advertising data operator. The creative is assigned a token automatically.

    Note

    If a specific banner doesn't need to be added to the ad register, select Do not submit data to state register.

Contact support

Send an email

Previous
Screenglide HTML5
Next
BannerLine HTML5