Desktop Topscroll Expand (HTML5)

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 creativeState;

window.addEventListener('load', function() {
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(window.__adnamiAdsAPI){
window.__adnamiAdsAPI.v1.eventManager.subscribe("ADNAMI_TSE", (data) => {
if(data.action == "expand"){
expandTopscroll();
}
if(data.action == "collapse"){
collapseTopscroll();
}
if(data.action == "stick"){
stickTopscroll();
}
if(data.action == "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.

Creative Lab Webinars

Join our resident Head of Creative, John Feltham, as he walks through the process of building hTML5 creatives.

Getting hands on with responsive HTML5

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.

Other Requirements

Do not link to any files or scripts hosted on external domains. All assets used should be included within the creative zip-file, or hosted on Adnami domains. Linking to resources on non-approved vendors may result in ads being blocked by Google Ads Manager and DV360.

Audio

User-initiated.

Template Details

Automatically synced on 2026-02-11T14:27:19.498Z. This section documents the canvases, banner templates, and trafficking controls directly from the source configs.

Canvases: Desktop Topscroll Expand
Banner templates: Zip File, Third Party Tag

Use the tables below to configure the linked banner templates. Each parameter definition is pulled straight from the template config, ensuring the spec always documents the latest functionality.

Zip File

Empty format only containing zip contents. · Version 1.0.1

General

Third Party Tag

Third party tag or script · Version 1.0.0

General