Sliding Banner

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:

<div id="myAd">
    <div id="layout1" class="container"></div>
    <div id="layout2" class="container"></div>
    <div id="global" class="container"></div>  
</div>
  • #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.

Fourth Step

Dynamize your banner:

  • Initialize your dynamic data which will be inserted 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 (All these options are mandatory):

  • direction : is the direction of movement of the transition animation between the two layers during user interaction. Two values available : 'horizontal' (default value) 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

Examples