VISIBILITY MANAGEMENT
Visibility Management lets you play a creative’s animation only when it’s visible.
To implement this solution, we must manage the visibility event in the banner and execute the animation when the event is captured.
Case where the banner is not visible:
First of all, you must modify your banner for the default display (image, div …), in case the banner is not visible.
In your html file, add a div corresponding to the size of your banner or a default image
example :
<div id="loading" class="loading-image" style="background-image: url('no_visible.png');width:300px;height:250px;"></div>
For now we do not display the original banner with the animation
<div id="container" style="width:300px;height:250px;border:solid 1px black;position:absolute;display:none;background-image: url('visible.png');"></div>
the ADventori.isVisible () method lets you know if the banner is visible.
ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,callBackFunction); this method subscribes to the visibility event and calls the parameter function when it is visible
example :
//in the case below the function startAnimation will be called when the banner will be 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';
//your code to trigger the animation of the banner
}
Test the visibility of the banner:
Go to the ADventori test page : link
Upload your banner, to activate visibility click on the eye icon
resultat :
