visibilité

GERER LA VISIBILITE

La gestion de la visibilité vous permet de jouer l’animation d’une créa uniquement lorsque celle-ci est visible.
Pour implémenter cette solution, nous devons gérer l’événement de visibilité dans la bannière et exécuter l’animation lorsque l’événement est capturé.

Cas où la bannière n’est pas visible :

Avant toute chose , vous devez modifier votre bannière pour l’affichage par defaut (image , div…), dans la cas ou la bannière n’est pas visible .
Dans votre fichier html, ajoutez une div correspondant à la taille de votre bannière ou une image par defaut

exemple : 

<div id="loading" class="loading-image" style="background-image: url('no_visible.png');width:300px;height:250px;"></div>

Pour l’instant nous ne souhaitons pas afficher l’animation

<div id="container" style="width:300px;height:250px;border:solid 1px black;position:absolute;display:none;background-image: url('visible.png');"></div>

La methode ADventori.isVisible () vous renseigne quand la bannière est visible.

ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,callBackFunction); cette méthode s’abonne à l’événement de visibilité et appelle la fonction en paramètre lorsqu’elle est visible

exemple : 

//dans le cas ci-dessous, la fonction startAnimation sera appelée quand la bannière sera visible

if(!ADventori.isVisible()){
  ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,startAnimation);
}else{
  startAnimation();
}
function startAnimation() {
  document.getElementById('loading').style.display = 'none';
  document.getElementById('container').style.display = 'block';
  //votre code pour déclencher l'animation de la bannière
}

lien d’exemple

Tester la visibilité de vôtre bannière:

Allez dans la page de test ADventori : lien

Uploadez votre bannière, pour activer la visibilité, cliquez sur l’icône en forme d’oeil

resultat :

Téléchargez l’exemple