Interscroller Format

The cross-device Interscroller is a format that places a fullscreen (100% x 100%) layer on a fixed top left position of your screen, behind all content of the website where it is placed. The Interscroller will become visible while scrolling, through a viewport that is usually the size of your screen. This viewport can have a different height, for example 240px. By doing this, the whole Interscroller can never be entirely visible at once, but you will have to scroll through it. You can see a preview of the 100% x 100% viewport here.

There is also an mandatory overlay, that can be placed over the viewport of the Interscroller. This way any content that is in this overlay will stay in the viewport and move with the page while scrolling. The overlay is currently mandatory and ensures that the interscroller is working properly. This means that you can't use interactive elements in the interscroller.html file, but you can place them in the interscroller-mandatory-front.html. You can also leave the interscroller-mandatory-front.html file empty, but make sure to upload it anyway. Check a preview of an Interscroller with this overlay here.

In the template zip there are a couple of examples added. These examples replace either the main Interscroller background ( interscroller.html) or the mandatory front overlay ( interscroller-mandatory-front.html).

• Interscroller with Video. This is an example of the main Interscroller, with a video example in the background added. The video container size can be changed via CSS. There is even a difference between portrait en landscape video container size. Please note that the controls will not be accessible in this example.
• Overlay with an Image. This is an example of the mandatory overlay, with an image container, containing either a portrait or landscape image. On device orientation change there will be a switch between two images (portrait and landscape). This example is made for the smartphone view (so only 2 images). To make it cross-device ready, add an extra check for the current device type using screenad.deviceType. For more info check our Screenad API.
• Overlay with Video. This is an example of the mandatory overlay, with a video container, containing a mp4 video. The size of the video container can be changed via CSS. A class is added for the video container on orientation (video-landscape or video-portrait). This way you can have different properties for portrait view and landscape view.

Interscroller Size Specifications

Even though the Interscroller can be set up to have different sizes, some campaigns or publishers may demand specific sizes. This is why, when making your creation, make sure the height and the width are clearly confirmed by the publisher.

The following sites set automatically the Interscroller to a specific size.

Mannenmedia websites:

• gaspedaal.nl
  
  • Desktop - 1120 x 250 px
  • Tablet Landscape - 900 x 250 px
  • Tablet Portrait - 768 x 250 px
• autowereld.nl & speurders.nl
  • Desktop - 920 x 250 px
  • Tablet - 100% x 250 px
• handelsprijzen.nl
  • Desktop - 692 x 250 px
  • Tablet - 100% x 250 px

Important notes for specific sizes:

1. Make sure you use these specific preview pages (instead of the general Interscroller preview page), specifically the "_result" versions, in order to see correct sizes (listed above).
2. Use the "Page Specific" display position when setting up your preview flight.
3. Use appropriate aspect ratio images for your wallpaper. Remember that 100% means variable values depending on the viewport size.

If you have any questions regarding specific sizes, don't hesitate in contacting our support team.

Interscroller Settings

In the next code example, you will find the most commonly used settings:

var settings = {
  deviceDrivenWallpaper: true,
  bgSmallPortrait: 'bg_small_portrait_621x1104.jpg',
  bgSmallLandscape: 'bg_small_landscape_1104x621.jpg',
  bgMediumPortrait: 'bg_medium_portrait_800x1366.jpg',
  bgMediumLandscape: 'bg_medium_landscape_1366x800.jpg',
  bgLarge: 'bg_large_2560x1440.jpg'
};

Next we explain all possible settings:

• deviceDrivenWallpaper: true (Boolean)
  This property will automatically place the correct wallpaper in the background div depending on the device it is viewed on. If you would like to change/set this manually via CSS, set the deviceDrivenWallpaper variable to false.
   
• interscrollerDesktopWidth: '100%', interscrollerDesktopHeight: '100%',
interscrollerPhonePortraitWidth: '100%', interscrollerPhonePortraitHeight: '100%',
interscrollerPhoneLandscapeWidth: '100%', interscrollerPhoneLandscapeHeight: '100%',
interscrollerTabletPortraitWidth: '100%', interscrollerTabletPortraitHeight: '100%',
interscrollerTabletLandscapeWidth: '100%', interscrollerTabletLandscapeHeight: '100%'
  ( interscrollerDEVICE[ORIENTATION]Width and interscrollerDEVICE[ORIENTATION]Height )
  The size settings indicate the height and width values of the Interscroller when active in a specific device and orientation combination. The default values are '100%' and variations of these values will only go live if approved in advance by the publisher. If this is the case, and the Interscroller needs to have a fixed height or width then fill in a pixel amount (for example, 240) and set the following property as true (ignoreSiteSpecsSizes) so that the sizes are not overwritten by website/publisher specifications. (*)
  
  
• ignoreSiteSpecsSizes: false,
  Disables the automatic size properties established by publisher specifications. We do not recommend to make use of this feature if you are not sure about it. If the publisher has not approved custom sizes in advanced for your specific campaign, your Interscroller ad could be sent back for modifications in order to follow website/publisher specifications. (*)
  
  
• bgSmallPortrait: 'bg_small_portrait_621x1104.jpg'
bgSmallLandscape: 'bg_small_landscape_1104x621.jpg'
bgMediumPortrait: 'bg_medium_portrait_800x1366.jpg'
bgMediumLandscape: 'bg_medium_landscape_1366x800.jpg'
bgLarge: 'bg_large_2560x1440.jpg'
  If deviceDrivenWallpaper is true, please fill in the correct images to be placed in the ad. Or just replace the images in the flight.
  Important note! We recommend not to place important content like logos and CTA buttons in the wallpaper image unless they are near the center. Instead, place your important content in the content div (smartphone, tablet, desktop or shared) and position it with CSS. The indicated background specifications are recommendations. Remember that device resolutions and browser viewports vary.
  
  
• showTopBar: true (Boolean)
  Decides if the top delimiter bar should we shown. (*)
  
  
• showBottomBar: true (Boolean)
  Decides if the bottom delimiter bar should we shown. (*)
  
  
• barHeight: 23
  Amount of pixels for the top and bottom bars, default 23 pixels.
  
  
• interscrollerBarColor: '#000000'
  Background color of the top and bottom bar, default #000000 (black). (*)
  
  
• interscrollerBarTextColor: '#ffffff'
  Text color in the top and bottom bar, default #ffffff (white). (*)
  
  
• topBarText: '- advertentie -'
  Text in the top bar, default '- advertentie -'. (*)
  
  
• bottomBarText: '- einde advertentie -'
  Text in the bottom bar, default '- einde advertentie -'. (*)
  
  

(*) Can be overwritten by publisher specifications that are applied automatically when live.

Interscroller Object

Right after the settings we define a variable Interscroller:

var Interscroller;

In the handlePreloadComplete function, the Interscroller gets initialized. And the settings are send to it. We listen for events that the Interscroller dispatches.

InterScroller = new window.WeboramaTemplates.InterScroller(settings);
InterScroller.addEventListener('onAdReady', handleOnAdReady);
InterScroller.addEventListener('onResize', handleResize); 
InterScroller.addEventListener('onOrientationChange', handleOrientationChange); 
InterScroller.addEventListener('onScroll', handleScroll);
InterScroller.addEventListener('onVisibilityChange', handleVisibilityChange);

When this is done, we can get some more information from the Interscroller.
Example: stage.style.height = InterScroller.getTotalContentHeight + 'px';

This function returns the calculated total content height depending on current browser height and if the navigation bars are visible or change in size (in all mobile browsers).

Front Overlay (mandatory)

This layer is mandatory. It is used to create a fixed overlay on top of the Interscroller with a transparent background. It is best used for logo's, text, video or other call to actions. Please note that if you use this, nothing in the background is clickable as this is a full overlay over the background Interscroller. Your exit clicks should be set in this layer.

In the Overlay with Video example, there is a video that will play when the ad becomes visible, and pauses when you scroll past the ad.
Side note on video: on mobile devices, video can not autoplay with audio if there is no interaction with the ad. Older browsers/os can not autoplay, so a tap on the play button is mandatory.
If you don't need video, please remove the placeVideo(); call in the onAdReady function.

Front Overlay Object

Right after the settings we define a variable InterScrollerOverlay:

var InterScrollerOverlay;

In the handlePreloadComplete function, the InterScrollerOverlay gets initialized. We listen for events that the InterScrollerOverlay dispatches.

InterScrollerOverlay = new window.WeboramaTemplates.InterScrollerOverlay(); 
InterScrollerOverlay.addEventListener('onAdReady', handleOnAdReady); 
InterScrollerOverlay.addEventListener('onResize', handleResize); 
InterScrollerOverlay.addEventListener('onVisibilityChange', handleVisibilityChange); 

When this is done, we can get some more information from the InterscrollerOverlay.
Example: stage.style.height = InterScrollerOverlay.state.totalContentHeight + 'px';
This variable returns the calculated total content height depending on current browser height and if the navigation bars are visible/ or if the navigation bars change size (in all mobile browsers).

Image Resizing / Mobile device resolutions

There is an example in the template called interscroller-mandatory-front-image.html.
This example was made for a smartphone overlay and uses 2 images, front-mandatory-overlay-portrait.png and front-mandatory-overlay-landscape.png.
The images are placed in a div named weborama-image-overlay with the following CSS:

#weborama-image-overlay {
   position: absolute;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 50% 50%;
 }

Because the background-size is set to cover, the image will scale as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

If you use the property contain, the image will scale as large as possible and maintains image aspect ratio (image doesn't get squished). The image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

In the "helper" images you can see a red frame, to show you what part of the image is visible on a smartphone. The green lines show where the save area is to place important content. This is smaller than you total screen size because all mobile browsers have an in-app menu bar and also navigation bars at the top and bottom, that also change in size depending on where you are scrolling.

Please view your creation in real devices so you will know what part of your creation is visible. The device emulator does not always displays the correct available content area.