Parallax

Overview

The In-App Parallax is an inline ad which shows a piece of background during scroll interactions. It supports image, agency scripts and html5 (with no interaction).

This format is designed to be displayed inside a SASBannerView attached to Scrollview, this scrollview cannot be zoomable and the parallax effect doesn't apply when scrolling horizontally.

Here are the supported classes (as well as the extended ones):

Parallax Javascript API

How to know if it's a parallax HTML5 placement

The creative can check if it's currently displayed in a Parallax environement and act accordingly.

var isParallaxContainer = (typeof sas != "undefined" && typeof sas.parallax != "undefined");

			

Parallax viewability

The creative can detect if it is viewable or not and modify its behavior accordingly (e.g: start an animation).

To do so it can rely on:

• the viewabilityChanged event:

  
  sas.parallax.addEventListener("viewabilityChanged",function(viewable){
  console.log("viewabilityChanged: "+viewable); // viewable is true or false
  });
  
  					

• the viewability property

  
  sas.parallax.viewable // viewable is true or false
  
  					

Parallax window position

If the creative needs detailed information about its current position inside the app viewport, it can call another API which will indicate the size and the exact position of the parallax window.

The parallax window size corresponds to the banner size.

The parallax position (x,y) is relative to the top left corner of the app.

To do so it can rely on:

• the parallaxWindowRectChanged event:

  
  sas.parallax.addEventListener("parallaxWindowRectChanged",function(rect){
  console.log("parallaxWindowRectChanged: "+rect.x +","+ rect.y +","+ rect.width +","+ rect.height); // object representing {x,y,width,height}
  });
  
  					

• the parallaxWindowRect property

  
  sas.parallax.parallaxWindowRect // object representing {x,y,width,height}
  
  					

Optional integration API

If you have some display issues with the Parallax format inside your application, typically when using custom components that overlay the SASBannerView (like a toolbar or navigation bar), there are some APIs to override the default Parallax settings. Those APIs allow you set a top or a bottom margin to prevent the parallax scrolling from going under the custom components.

Please read dedicated documentation for:

• Android

• iOS