{"id":19516,"date":"2018-01-05T16:37:00","date_gmt":"2018-01-05T15:37:00","guid":{"rendered":"https:\/\/www.adventori.com\/fr\/?p=19516"},"modified":"2018-03-29T12:05:05","modified_gmt":"2018-03-29T10:05:05","slug":"visibilite","status":"publish","type":"post","link":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/","title":{"rendered":"visibilit\u00e9"},"content":{"rendered":"<style>\r\n.wedocs-single-wrap .wedocs-single-content article .entry-content img{\r\n        padding: inherit;\r\n}\r\n<\/style>\r\n<h3 id=\"image\" style=\"text-align: center;\"><strong>GERER LA VISIBILITE<\/strong><\/h3><p>La gestion de la visibilit\u00e9 vous permet de jouer l&rsquo;animation d&rsquo;une cr\u00e9a uniquement lorsque celle-ci est visible.<br \/>Pour impl\u00e9menter cette solution, nous devons g\u00e9rer l\u2019\u00e9v\u00e9nement de visibilit\u00e9 dans la banni\u00e8re et ex\u00e9cuter l&rsquo;animation lorsque l\u2019\u00e9v\u00e9nement est captur\u00e9.<\/p><p><br \/><strong>Cas o<span>\u00f9<\/span> la banni\u00e8re n&rsquo;est pas visible :<\/strong><\/p><p>Avant toute chose , vous devez modifier votre banni\u00e8re pour l&rsquo;affichage par defaut (image , div&#8230;), dans la cas ou la banni\u00e8re n&rsquo;est pas visible .<br \/>Dans votre fichier html, ajoutez une div correspondant \u00e0 la taille de votre banni\u00e8re ou une image par defaut<\/p><p>exemple :\u00a0<\/p><p><code>&lt;div id=\"loading\" class=\"loading-image\" style=\"background-image: url('no_visible.png');width:300px;height:250px;\"&gt;&lt;\/div&gt;<\/code><\/p>\r\n\r\n\r\n\r\n\r\n\r\n<p>Pour l&rsquo;instant nous ne souhaitons pas afficher l&rsquo;animation<\/p>\r\n<p><code>&lt;div id=\"container\" style=\"width:300px;height:250px;border:solid 1px black;position:absolute;<strong>display:none;<\/strong>background-image: url('visible.png');\"&gt;&lt;\/div&gt;<\/code><\/p>\r\n\r\n<strong>Capturer la visibilit\u00e9: <\/strong>\r\n<p>La methode\u00a0<strong>ADventori.isVisible ()<\/strong> vous renseigne quand la banni\u00e8re est visible.<\/p><p><strong>ADventori.Event.addEventListenerOnce(ADventori.Event.VISIBLE,callBackFunction); <\/strong>cette m\u00e9thode s&rsquo;abonne \u00e0 l&rsquo;\u00e9v\u00e9nement de visibilit\u00e9 et appelle la fonction en param\u00e8tre lorsqu&rsquo;elle est visible<\/p><p>exemple :\u00a0<\/p><p><code>\/\/dans le cas ci-dessous, la fonction startAnimation sera appel\u00e9e quand la banni\u00e8re sera visible<\/code>\r\n\r\n<code><\/code><\/p>\r\n\r\n\r\n\r\n\r\n<pre><span>if<\/span>(!ADventori.isVisible()){<br \/>  ADventori.Event.<strong>addEventListenerOnce<\/strong>(ADventori.Event.VISIBLE,startAnimation);<br \/>}<span>else<\/span>{<br \/>  startAnimation();<br \/>}<span><br \/><\/span><span>function <\/span>startAnimation() {<span><br \/><\/span><span>  <\/span>document.getElementById(<span>'loading'<\/span>).style.display = <span>'none'<\/span>;<br \/>  document.getElementById(<span>'container'<\/span>).style.display = <span>'block'<\/span>;<br \/>  \/\/votre code pour d\u00e9clencher l'animation de la banni\u00e8re<br \/>}<\/pre>\r\n\r\n\r\n\r\n\r\n<p><a href=\"http:\/\/bo.adventori.com\/testPage\/test?creativeId=05afba5d-d260-4a33-8b10-72b619147796\/index.html&#038;size=300x250\" target=\"_blank\" rel=\"noopener\">lien d&rsquo;exemple<\/a><\/p>\r\n\r\n<p><strong>Tester la visibilit\u00e9 de v\u00f4tre banni\u00e8re:<\/strong><\/p><p>Allez dans la page de test ADventori : <a target=\"_blank\" href=\"http:\/\/bo.adventori.com\/testPage\/test\" rel=\"noopener\">lien<\/a><\/p>\r\n<p>Uploadez votre banni\u00e8re, pour activer la visibilit\u00e9, cliquez sur l&rsquo;ic\u00f4ne en forme d&rsquo;oeil<\/p><p>&nbsp;<\/p>\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"\/\/www.adventori.com\/media\/visibilite1.png\" alt=\"link_enabler\" class=\"aligncenter wp-image-5546 size-full\" width=\"860\" height=\"370\" \/>\r\n\r\n<p>&nbsp;<\/p>\r\n<p>resultat :<\/p>\r\n\r\n<img loading=\"lazy\" decoding=\"async\" src=\"\/\/www.adventori.com\/media\/visibilite2.png\" alt=\"link_enabler\" class=\"aligncenter wp-image-5546 size-full\" width=\"704\" height=\"380\" \/>\r\n\r\n\r\n<p style=\"text-align: right;\"><a href=\"\/\/adventori.com\/lp\/enabler\/templates\/Wall_CreaV2\/visibilite\/html5\/visibilite_html5.zip\"><button class=\"btn btn-primary\">T\u00e9l\u00e9chargez l&rsquo;exemple<\/button><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>GERER LA VISIBILITELa gestion de la visibilit\u00e9 vous permet de jouer l&rsquo;animation d&rsquo;une cr\u00e9a uniquement lorsque celle-ci est visible.Pour impl\u00e9menter cette solution, nous devons g\u00e9rer l\u2019\u00e9v\u00e9nement de visibilit\u00e9 dans la banni\u00e8re et ex\u00e9cuter l&rsquo;animation lorsque l\u2019\u00e9v\u00e9nement est captur\u00e9.Cas o\u00f9 la banni\u00e8re n&rsquo;est pas visible :Avant toute chose , vous devez modifier votre banni\u00e8re pour l&rsquo;affichage &hellip; <a href=\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/\">Continued<\/a><\/p>\n","protected":false},"author":11,"featured_media":20610,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[237],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>visibilit\u00e9 | ADventori<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"visibilit\u00e9 | ADventori\" \/>\n<meta property=\"og:description\" content=\"GERER LA VISIBILITELa gestion de la visibilit\u00e9 vous permet de jouer l&rsquo;animation d&rsquo;une cr\u00e9a uniquement lorsque celle-ci est visible.Pour impl\u00e9menter cette solution, nous devons g\u00e9rer l\u2019\u00e9v\u00e9nement de visibilit\u00e9 dans la banni\u00e8re et ex\u00e9cuter l&rsquo;animation lorsque l\u2019\u00e9v\u00e9nement est captur\u00e9.Cas o\u00f9 la banni\u00e8re n&rsquo;est pas visible :Avant toute chose , vous devez modifier votre banni\u00e8re pour l&rsquo;affichage &hellip; Continued\" \/>\n<meta property=\"og:url\" content=\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/\" \/>\n<meta property=\"og:site_name\" content=\"ADventori\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-05T15:37:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-03-29T10:05:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/v4.adventori.com\/media\/ADventori-Visibility.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@adventori\" \/>\n<meta name=\"twitter:site\" content=\"@adventori\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ismail Azdad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/v4.adventori.com\/#organization\",\"name\":\"ADventori\",\"url\":\"https:\/\/v4.adventori.com\/\",\"sameAs\":[\"https:\/\/twitter.com\/adventori\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/\",\"url\":\"\/media\/Large_Logo-ADventori_Couleur_2015.png\",\"contentUrl\":\"\/media\/Large_Logo-ADventori_Couleur_2015.png\",\"width\":400,\"height\":133,\"caption\":\"ADventori\"},\"image\":{\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/v4.adventori.com\/#website\",\"url\":\"https:\/\/v4.adventori.com\/\",\"name\":\"ADventori\",\"description\":\"LESS ADS, MORE EFFICIENT ADS\",\"publisher\":{\"@id\":\"https:\/\/v4.adventori.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/v4.adventori.com\/search\/{search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#primaryimage\",\"url\":\"https:\/\/v4.adventori.com\/media\/ADventori-Visibility.jpg\",\"contentUrl\":\"https:\/\/v4.adventori.com\/media\/ADventori-Visibility.jpg\",\"width\":540,\"height\":410},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#webpage\",\"url\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/\",\"name\":\"visibilit\u00e9 | ADventori\",\"isPartOf\":{\"@id\":\"https:\/\/v4.adventori.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#primaryimage\"},\"datePublished\":\"2018-01-05T15:37:00+00:00\",\"dateModified\":\"2018-03-29T10:05:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/v4.adventori.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"visibilit\u00e9\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#webpage\"},\"author\":{\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/person\/e6f1b8450889d31648a36063f22d3564\"},\"headline\":\"visibilit\u00e9\",\"datePublished\":\"2018-01-05T15:37:00+00:00\",\"dateModified\":\"2018-03-29T10:05:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#webpage\"},\"wordCount\":190,\"publisher\":{\"@id\":\"https:\/\/v4.adventori.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/v4.adventori.com\/media\/ADventori-Visibility.jpg\",\"articleSection\":[\"Composants\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/v4.adventori.com\/#\/schema\/person\/e6f1b8450889d31648a36063f22d3564\",\"name\":\"Ismail Azdad\",\"sameAs\":[\"https:\/\/www.adventori.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"visibilit\u00e9 | ADventori","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/","og_locale":"fr_FR","og_type":"article","og_title":"visibilit\u00e9 | ADventori","og_description":"GERER LA VISIBILITELa gestion de la visibilit\u00e9 vous permet de jouer l&rsquo;animation d&rsquo;une cr\u00e9a uniquement lorsque celle-ci est visible.Pour impl\u00e9menter cette solution, nous devons g\u00e9rer l\u2019\u00e9v\u00e9nement de visibilit\u00e9 dans la banni\u00e8re et ex\u00e9cuter l&rsquo;animation lorsque l\u2019\u00e9v\u00e9nement est captur\u00e9.Cas o\u00f9 la banni\u00e8re n&rsquo;est pas visible :Avant toute chose , vous devez modifier votre banni\u00e8re pour l&rsquo;affichage &hellip; Continued","og_url":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/","og_site_name":"ADventori","article_published_time":"2018-01-05T15:37:00+00:00","article_modified_time":"2018-03-29T10:05:05+00:00","og_image":[{"width":540,"height":410,"url":"https:\/\/v4.adventori.com\/media\/ADventori-Visibility.jpg","type":"image\/jpeg"}],"twitter_card":"summary","twitter_creator":"@adventori","twitter_site":"@adventori","twitter_misc":{"Written by":"Ismail Azdad","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/v4.adventori.com\/#organization","name":"ADventori","url":"https:\/\/v4.adventori.com\/","sameAs":["https:\/\/twitter.com\/adventori"],"logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/","url":"\/media\/Large_Logo-ADventori_Couleur_2015.png","contentUrl":"\/media\/Large_Logo-ADventori_Couleur_2015.png","width":400,"height":133,"caption":"ADventori"},"image":{"@id":"https:\/\/v4.adventori.com\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/v4.adventori.com\/#website","url":"https:\/\/v4.adventori.com\/","name":"ADventori","description":"LESS ADS, MORE EFFICIENT ADS","publisher":{"@id":"https:\/\/v4.adventori.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/v4.adventori.com\/search\/{search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#primaryimage","url":"https:\/\/v4.adventori.com\/media\/ADventori-Visibility.jpg","contentUrl":"https:\/\/v4.adventori.com\/media\/ADventori-Visibility.jpg","width":540,"height":410},{"@type":"WebPage","@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#webpage","url":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/","name":"visibilit\u00e9 | ADventori","isPartOf":{"@id":"https:\/\/v4.adventori.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#primaryimage"},"datePublished":"2018-01-05T15:37:00+00:00","dateModified":"2018-03-29T10:05:05+00:00","breadcrumb":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/v4.adventori.com\/fr\/"},{"@type":"ListItem","position":2,"name":"visibilit\u00e9"}]},{"@type":"Article","@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#article","isPartOf":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#webpage"},"author":{"@id":"https:\/\/v4.adventori.com\/#\/schema\/person\/e6f1b8450889d31648a36063f22d3564"},"headline":"visibilit\u00e9","datePublished":"2018-01-05T15:37:00+00:00","dateModified":"2018-03-29T10:05:05+00:00","mainEntityOfPage":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#webpage"},"wordCount":190,"publisher":{"@id":"https:\/\/v4.adventori.com\/#organization"},"image":{"@id":"https:\/\/v4.adventori.com\/fr\/enabler-html5-fr\/composants\/visibilite\/#primaryimage"},"thumbnailUrl":"https:\/\/v4.adventori.com\/media\/ADventori-Visibility.jpg","articleSection":["Composants"],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/v4.adventori.com\/#\/schema\/person\/e6f1b8450889d31648a36063f22d3564","name":"Ismail Azdad","sameAs":["https:\/\/www.adventori.com\/"]}]}},"_links":{"self":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts\/19516"}],"collection":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/comments?post=19516"}],"version-history":[{"count":26,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts\/19516\/revisions"}],"predecessor-version":[{"id":19641,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/posts\/19516\/revisions\/19641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/media\/20610"}],"wp:attachment":[{"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/media?parent=19516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/categories?post=19516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/v4.adventori.com\/fr\/wp-json\/wp\/v2\/tags?post=19516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}