Interscroller
Interscroller banner is an effective full-view banner in mobile that is fixed to view but under content and displayed only when scrolled over a gap in the content. This effectivly causes a cool semi-parallax effect
Interscroller banner is either 360x640px single image or a responsive html5 banner. Image is set as background, center aligned and scaled to be contained with in screen size. Html5 banner is shown through a responsive iframe but is responsible for its own responsiveness.
Interscroller is fixed to device screen size but different devices and different browsers handle browser- and device-bars differently, avoid designing to the edge. Especially the top and bottom edges. Keep the content as center as possible for the best effect.
Limitations
Intercroller banners can not be interactive – the click layer is placed on top of the banner and no click/touch events reach the banner. This for example means that multiple clicktags can not be used.
Inscreen statistics are not calculated for Interscoller.
Video elements should have autoplay enabled but in-view setting disabled – as the inscreen position calucation doesn’t work – any video with in-view setting enabled would never play. Videos should have no audio track – as they would need to be muted in order for autoplay to work and the can not be unmuted – as there is no user inateraction to unmute the video.
Specifications
Single image interscroller
A single image that is positioned center aligned on the background.
- Dimensions: 360x640px
- Weight Limit: 100KB
HTML5 interscroller
A responsive HTML5 banner that is positioned is shown through a responsive iframe. The banner is reponsible for its own responisveness.
- Dimensions: responsive (start with 360x640px but make sure it responds well in smaller and larger screen too)
- Weight Limit: 120KB
- Optional video: 500KB (muted)
Background color
By default Interscroller background behind banner will be painted black. This is visible if device screen is propotionally not compatible with interscroller default size (360x640px)
With HTML5 banner this can be changed by triggering postMessage to the parent window.
window.parent.postMessage({banner: 'Interscroller', backgroundColor: '#ededed'}, '*');
We recommend not adding it and keeping background black as default. We also reserve the right to send back advertisements with too colorful background colors.
Best practices
- Depending on device, browser, platform, view and scroll direction, some interscroller edges might not be visible (~15px on left and right, ~50px on top and bottom) so try to keep the content centered.
- Interscroller is fixed on the page but not always visible (behind content), keep animations and effects minimal, for good user experience.