SlidingBanner ADventori

Le slidingBanner d’ADventori vous permet d’avoir une bannière avec deux calques superposés. Pour que le deuxième calque soit visible, une interaction utilisateur doit avoir lieu : soit lors du survol de la bannière avec la souris, soit au balayement du doigt sur un appareil tactile. Ce format est plus adapté aux grands formats publicitaires plutôt qu’aux petits formats.

Première étape : Installez le JS et le CSS du DCO Enabler ADventori. (Plus de détails ici)

Deuxième étape : Déclarez les différents éléments HTML

#myAd : div qui contiendra notre bannière
#layout1 : div qui accueillera tous les éléments qui appartiennent au calque 1
#layout2 : div qui accueillera tous les éléments qui appartiennent au calque 2
#global : div qui contiendra tous les éléments qui seront communs aux deux calques (par exemple : le logo, une instruction utilisateur, etc.).

Puis insérez les différents éléments que vous voulez dans les différents containers (#layout1, #layout2, #global)

Troisième étape : Déclarez les styles CSS des éléments de votre bannière.

#myAd sera de la taille de la bannière et en position relative
#layout1, #layout2, #global : devront être en position absolute, ancré en haut à gauche (top :0;left :0; ) , et avec une largeur et une hauteur de 100%.
Si #layout2 doit être révélé à l’interaction utilisateur (il est donc caché au début), vous devez le placer par-dessus #layout1.

Tous les autres éléments sont à styliser en fonction de vos désirs.

Quatrième étape : Dynamisez votre bannière

Initialisez vos données dynamiques qui seront insérez dans la bannière
Insérez ces données dynamiques dans leurs containers respectifs en utilisant nos fonctions de dynamisation.

Cinquième étape : Déclarez et configurez le composant slidingBanner

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

Options de configuration :

direction : correspond à la direction du mouvement de l’animation de transition entre les deux calques lors de l’interaction utilisateur.
Deux valeurs possibles : 'horizontal' (par défaut) et 'vertical'
adContainer : le container de la bannière
layoutToShow : correspond au calque qui doit être caché par défaut et qui apparaitra lors de l’interaction utilisateur, le calque ciblé dans cet option doit obligatoirement être positionné par-dessus l’autre calque
urlClick1 : url de redirection lorsque l’utilisateur clique sur la partie correspondant au calque1
urlClick2 : url de redirection lorsque l’utilisateur clique sur la partie correspondant au calque2

/!\ Toutes ces options sont obligatoires

Composants

SlidingBanner ADventori

SlidingBanner ADventori

Exemples

970×250

Interstitiel Responsive