Desktop Topscroll Expand (Image/Video)

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 template allows for the easy creation of a Topscroll Expand creative, using a few simple assets.

Examples

Adventure Travel

Recommended asset dimensions

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

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

Background(s):

  • The template supports either using one background asset (JPG or MP4) across all three states, or using individual background assets for each state.
    • If using a single asset for all states, create a background asset using the dimensions for the largest state (Expand).
    • If using individual background assets, create one for each state using the three dimensions above.
  • The background asset may appear cropped dependant on screen size or resolution, so avoid placing any critical content on it - instead use the overlays to contain your branding and messaging.

Overlays:

  • Each state uses a separate overlay asset (PNG with a transparent background), which are swapped when the banner transitions from one state into another. As with many of our templates, the specific dimensions of the overlay assets are flexible, here are some suggested overlay dimensions for each state:
    • Default: 1800x460px 
    • Expand: 820x800px
    • Sticky: 1370x120px

Video Player:

  • A single 16:9 video asset is used across all three states.
    Use dimensions of 888x500 (or similar), MP4, <2MB.

Format description and guidance

The background asset (image or video) fills the entire format background. If separate background assets are not required for any of the states, then just leave them blank and the default state background will be used instead.

For each state, upload an overlay asset containing your brand elements. The overlays should be used for the logo, headline, CTA, and any other brand elements that you need to always be visible. The content of the overlay will be centred within the available space, with a 10% margin added around all sides.

The video is a required element. It is autoplaying, and muted by default. The video will continue playing as the banner transitions to different states, ensuring excellent video playthrough rates.

PSD Template Desktop Topscroll Expand

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

The format template supports one clicktag & impression tracker.

Audio

User initiated.