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 isn't visible 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:
- Use relative units when adding a banner in the interface: 100 vw and 100 vh.
- Add the banner ad code to the site layout so that it's not limited by the size of the parent element.
The embed code 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, unless the Ad label is disabled.
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:
banner div container from the ad tag
banner container window whose dimensions are specified in the banner parameters
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. Therefore, for the effect to apply correctly to any of the parent elements in the banner, do not use the transform, perspective, or filter properties. Learn more about the position: fixed CSS property.
Image requirements
Acceptable image formats: PNG, GIF, and JPG.
Maximum file size: 10 MB.
Add a banner to Adfox
To add a banner to Adfox, select the desired banner type and the Banner Interscroller HTML5 [context] template.
Set the banner parameters:
|
Parameter |
Description |
|
HTML5 code of the creative |
Upload a ZIP archive with the project. |
|
Tracking pixel link |
Adfox pixel is used by default |
|
Transition URL |
Link to the advertiser's website. For the click-through to work correctly, make sure that the link includes the protocol ( |
|
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. |
|
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. The bar is hidden when a new Ad label is enabled. You can use the following units to specify width and height, adding the exact dimensions:
|
|
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 embed code is taken as 100%. If no value is specified, the value will be equal to 100% of the width of the container. |
|
Height of the container window (px, %, vh, vw, number) |
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. |
|
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. |
|
Banner height (px, %, vh, vw, number) |
If the value is specified as a percentage, the height of the container window is taken as 100%. |
|
autoScroll (yes|no) |
The ability of the banner to be scrolled to full screen if its visible part exceeds 4/5 of the screen:
|
|
Image position (contain, cover) |
Specify where the image is located in the banner and how it's scaled. Acceptable values:
|
|
Image |
Upload an image or provide a link to an image file. |
|
Name of the banner container class attribute |
If necessary, enter a name (or multiple names separated by a space) for the |
|
advStyle |
The CSS style for the Advertisement button design. |
|
Text on the advertising label |
The text on the Ad label. By default, “Ad” will be specified. |
|
Advertising label settings:
|
In the Ad label list, select Note Adding the “Social ad” label doesn't automatically define the creative as social advertising. To label a creative as a social ad (PSA) in the state register, select Social advertising contract with payment or Social advertising contract by quota 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 the Note If you set up the Ad label, the word “Ad” will be removed from the bottom bar. |
|
Show banner menu |
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 The banner menu contains a link to the rules for using recommendation technologies. It's required for compliance with Clause 3 of Section 1 of Article 10.2-2 of the Federal Law No. 149-FZ “On information, information technologies, and information protection”, dated July 27, 2006. Note If the banner is non-clickable (the Transition URL field is empty) and has not been added to the ad register, you can enable the banner menu to make the token available when serving the banner. |
|
Advertising labeling |
Advertising labeling: This section is only available if you've selected Submit data to state register as a labeling procedure 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 the banner isn't to be added to the ad register, select Do not submit data to state register. |
menu icon will be displayed in its upper-right corner. When a user clicks the icon, the advertiser's details and the copy token button appear (if ad register is enabled for the banner or a third-party token is specified).