Desktop Topscroll Expand (HTML5)

Set up campaign Book demo Safe Zone tool

Topscroll Expand is a responsive high impact format that appears in three distinct states. By default, the format appears as a 30% height Topscroll. On interaction (eg mouse hover), the format expands to take up 70% of the screen height. When the user scrolls down the page, the whole format collapses down to a 10% height sticky banner at the top of the screen. This guide is for the creation of custom HTML5 executions of the Topscroll expand format.

Examples

Adventure Travel

Recommended default dimensions

Dimensions for each state are roughly as follows (based on 2560x1440 resolution):

  • Default: 2560x432px (30% height)
  • Expand: 2560x1008px (70% height)
  • Sticky: 2560x144px (10% height)

Format description and guidance

The banner should be built as responsive HTM5, with the width and height set to 100% of its container. The format will automatically add a close button to the top right corner of the sticky banner (and expand on mobile), and will also handle the functionality for the expand and sticky behaviour. The creative needs to just listen out for some custom events, and use them to control the visibility or styles of elements within the creative as it transitions to each state.

Use the Javascript code snippet below to set up your HTML5 file:

let adnamiTopscroll, creativeState;

window.addEventListener('load', function() {
    adnamiTopscroll = window.adnamiTopscroll || window.frameElement;
    creativeState = window.creativeState || "default";
    initBanner();
 }

function initBanner() {
    switch (creativeState) {
        case "expand":
            expandTopscroll();
            break;
        case "sticky":
            stickTopscroll();
            break;
        default:
            defaultLayout();
            break;
    }

    function defaultLayout() {
        // Styles and logic for default state
    }

    function expandTopscroll(e) {
        // Styles and logic for expand state
    }

    function collapseTopscroll(e) {
        // Styles and logic for going from the expand state to the default state 
    }

    function stickTopscroll(e) {
        // Styles and logic for banner transitioning to sticky state
    }

    function unstickTopscroll(e) {
        // Styles and logic for going from the sticky state to the default state 
    }

    if (adnamiTopscroll) {
        adnamiTopscroll.addEventListener("expand", expandTopscroll);
        adnamiTopscroll.addEventListener("collapse", collapseTopscroll);
        adnamiTopscroll.addEventListener("stick", stickTopscroll);
        adnamiTopscroll.addEventListener("unstick", unstickTopscroll);
    }
}

All creative assets (images, videos, scripts etc) used by your banner must be included within the creative Zip-file. Linking to assets hosted on external severs is not permitted, and may result in your ad being blocked by some vendors. The only exception to this rule is for webfonts hosted by fonts libraries for licensing purposes, such as Adobe Typekit, Google Fonts, MyFonts etc.

Max total file weight

3.5 MB
For best performance, all assets should be compressed and optimized to the lowest possible file weight. We recommend using tinypng.com to compress PNGs.

Click tags and tracking

For Adnami hosted creatives, see our clicktags and tracking guide. 
To enable video tracking metrics, see our API for measuring VTR guide.

Audio

User-initiated.