Banner Interscroller HTML5
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.
- HTML creative.
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 tag to the site layout so that it's not limited by the size of the parent element.
The ad tag on the site has a container the banner code is loaded into. For example:
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.
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.
position: fixedCSS property. That is why, for the effect to work correctly, you shouldn't use the
filterproperties in any of the parent elements of the banner. Learn more about the position: fixed CSS property.
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: