SlidingBanner ADventori

The slidingBanner of ADventori allows you to have a banner with two superimposed layers. For the second layer to be visible, user interaction is required: either when over the banner with the mouse, or by moving the finger on a touch device. This format is more suitable for large advertising formats rather than small formats.

First step : Install the JS and CSS of the DCO Enabler ADventori. (More details here)

Second step : Declare the different HTML elements

#myAd : div which will contain your banner
#layout1 : div which will host all elements from layout 1
#layout2 : div which will host all elements from layout 2
#global : div which will host all common elements for the two layouts (for example : logo, user instruction, etc.).

Then insert all elements that you want in their respective containers (#layout1, #layout2, #global)

Third step : Declare CSS of different elements in your banner.

#myAd will be the size of the banner with the property position relative
#layout1, #layout2, #global : will be with the property position absolute, anchored at the top left (top :0;left :0; ) , with a width and a height of 100%.
If #layout2 has to appear with a user interaction (it’s hide at the beginning), you have to put it above #layout1.

Design all the others elements as you want.

Fourth step : Dynamize your banner

Initialize your dynamic data which will be insert in your banner.
Insert these dynamic data inside their containers by using our dynamization functions.

Fifth step : Declare and configure the component slidingBanner

var slidingBanner = new SlidingBanner({
   direction:'vertical',
   adContainer:document.getElementById('myAd'),
   layoutToShow:document.getElementById('layout2'),
   urlClick1:ADventori.data.url1,
   urlClick2:ADventori.data.url2 
});

Configuration options :

direction : is the direction of movement of the transition animation between the two layers during user interaction.
Two values available : 'horizontal' (par défaut) et 'vertical'
adContainer : The banner’s container
layoutToShow : is the layout that must be hidden by default and will appear during the user interaction, the layout targeted in this option must necessarily be positioned on top of the other layout
urlClick1 : url redirection when the user clicks on the part corresponding to the layout1
urlClick2 : url redirection when the user clicks on the part corresponding to the layout2

/!\ All these options are mandatory

Components

SlidingBanner ADventori

SlidingBanner ADventori

Examples

970×250

Interstitial Responsive