---
{
	"title": "Data Inview",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Affiche de contenu superposé quand une section se déplace hors de la clôture.",
	"tag": "data-inview",
	"parentdir": "data-inview",
	"altLangPrefix": "data-inview",
	"css": ["demo/data-inview"],
	"js": ["demo/data-inview"],
	"dateModified": "2014-07-21"
}
---
<span class="wb-prettify all-pre"></span>

<section>
	<h2>Intention</h2>
	<p>Créer des panneaux de contenu de position fixe qui sont conditionnellement affichées quand la page est défiler et redimensionner.</p>
</section>

<section>
	<h2>Exemple avec des barres conditionnelle</h2>

	<section class="wb-inview bar-demo" data-inview="barre-bas">
		<h3 class="no-gutter">Section avec une barre en bas conditionnelle</h3>
		<p>Une barre sera affichée en bas lors de cette section est <strong>partiellement hors</strong> de la clôture.</p>
		<p><strong>L'état d'affichage&#160;:</strong> <code lang="en"></code></p>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;section class=&quot;wb-inview bar-demo&quot; data-inview=&quot;barre-bas&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section avec une barre en bas conditionnelle&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section id=&quot;barre-bas&quot; class=&quot;wb-overlay modal-content overlay-def wb-bar-b&quot;&gt;
	&lt;header&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Barre en bas&lt;/h2&gt;
	&lt;/header&gt;
	...
&lt;/section&gt;</code></pre>
		</details>
	</section>

	<p role="img" aria-label="" class="text-muted">Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>

	<section class="wb-inview show-none bar-demo" data-inview="barre-haut">
		<h3 class="no-gutter">Section avec une barre en haut conditionnelle</h3>
		<p>Une barre sera affichée en haut lors de cette section est <strong>entièrement hors</strong> de la clôture (<code>class="show-none"</code>).</p>
		<p><strong>L'état d'affichage&#160;:</strong> <code lang="en"></code></p>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;section class=&quot;wb-inview show-none bar-demo&quot; data-inview=&quot;barre-haut&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section avec une barre en haut conditionnelle&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section id=&quot;barre-haut&quot; class=&quot;wb-overlay modal-content overlay-def wb-bar-t&quot;&gt;
	&lt;header&gt;
		&lt;h2 class=&quot;modal-title&quot;&gt;Barre en haut&lt;/h2&gt;
	&lt;/header&gt;
	...
&lt;/section&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2>Exemple avec des animations CSS</h2>
	<section class="well">
		<h3 class="h5 mrgn-tp-sm">Liste des animation CSS supporté</h3>
		<ul>
			<li><code>class="pop"</code></li>
			<li><code>class="fade"</code></li>
			<li><code>class="slide"</code></li>
			<li><code>class="slidefade"</code></li>
			<li><code>class="slidevert"</code></li>
		</ul>
		<p>Effectuer une animation inversé en ajoutant la classe <code>reverse</code> avec la classe de l'animation CSS.</p>
	</section>
	<section class="wb-inview bar-demo" data-inview="fade-effect">
		<h3 class="no-gutter">Section qui cause la section suivante à apparaître ou disparaître</h3>
		<p>La section suivante va apparaître lorsque cette section sera <strong>partiellement hors</strong> de la fenêtre.</p>
		<p><strong>L'état d'affichage&#160;:</strong> <code lang="en"></code></p>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;section class=&quot;wb-inview bar-demo&quot; data-inview=&quot;fade-effect&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section qui cause la section suivante à apparaître ou disparaître&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section id=&quot;fade-effect&quot; class=&quot;fade bar-demo&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section qui va apparaître / disparaître &lt;code&gt;id=&quot;fade-effect&quot;&lt;/code&gt;&lt;/h3&gt;
	...
&lt;/section&gt;</code></pre>
		</details>
	</section>

	<section id="fade-effect" class="fade bar-demo">
		<h3 class="no-gutter">Section qui va apparaître / disparaître <code>id="fade-effect"</code></h3>
		<div class="jumbotron mrgn-tp-lg">
			<p>Cette section apparaît et disparaît en fonction de l'état de l'affichage de la section précédente.</p>
		</div>
	</section>

	<section id="fade-effect2" class="fade bar-demo">
		<h3 class="no-gutter">Section qui va apparaître / disparaître <code>id="fade-effect2"</code></h3>
		<div class="jumbotron mrgn-tp-lg">
			<p>Cette section apparaît et disparaît en fonction de l'état de l'affichage de la section suivante.</p>
		</div>
	</section>

	<section class="wb-inview show-none bar-demo" data-inview="fade-effect2">
		<h3 class="no-gutter">Section qui cause la section précédente à apparaître ou disparaître</h3>
		<p>La section précédente va apparaître lorsque cette section sera <strong>partiellement hors</strong> de la fenêtre. (avec <code>class="show-none"</code>).</p>
		<p><strong>L'état d'affichage:</strong> <code class="view-state-status" lang="en"></code></p>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;section id=&quot;fade-effect2&quot; class=&quot;fade bar-demo&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section qui va apparaître / disparaître &lt;code&gt;id=&quot;fade-effect2&quot;&lt;/code&gt;&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section class=&quot;wb-inview show-none bar-demo&quot; data-inview=&quot;fade-effect2&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section qui cause la section précédente à apparaître ou disparaître&lt;/h3&gt;
	...
&lt;/section&gt;
</code></pre>
		</details>
	</section>

	<section id="slide-effect1" class="slide in-only bar-demo">
		<h3 class="no-gutter">Section qui glisse vers l'intérieur <code>id="slide-effect1"</code> seulement</h3>
		<div class="jumbotron mrgn-tp-lg">
			<p>Cette section apparaît en fonction de l'état de l'affichage de la section suivante.</p>
		</div>
	</section>

	<section class="wb-inview show-none bar-demo" data-inview="slide-effect1">
		<h3 class="no-gutter">Section qui cause la section précédente à apparaître</h3>
		<p>La section précédente va apparaître lorsque cette section sera <strong>partiellement hors</strong> de la fenêtre (avec <code>class=&quot;show-none&quot;</code>), et restez à la place.</p>
		<p><strong>View state:</strong> <code class="view-state-status"></code></p>
		<details>
			<summary>Visualiser le code</summary>
			<pre><code>&lt;section id=&quot;slide-effect1&quot; class=&quot;slide in-only bar-demo&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section qui glisse vers l'intérieur&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section class=&quot;wb-inview show-none bar-demo&quot; data-inview=&quot;slide-effect1&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section qui cause la section précédente à apparaître seulement&lt;/h3&gt;
	...
&lt;/section&gt;
</code></pre>
		</details>
	</section>
</section>

<div class="text-muted">
	<p role="img" aria-label="">Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
	<p role="img" aria-label="">Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
	<p role="img" aria-label="">Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
	<p role="img" aria-label="">Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
	<p role="img" aria-label="">Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
	<p role="img" aria-label="">Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
	<p role="img" aria-label="">Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
	<p role="img" aria-label="">Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.</p>
	<p role="img" aria-label="">Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.</p>
</div>

<section id="barre-haut" class="wb-overlay modal-content overlay-def wb-bar-t">
	<header>
		<h2 class="modal-title">Barre en haut</h2>
	</header>
	<ul class="list-inline">
		<li>
			<button class="btn btn-default" type="button">Bouton 1</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Bouton 2</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Bouton 3</button>
		</li>
	</ul>
</section>

<section id="barre-bas" class="wb-overlay modal-content overlay-def wb-bar-b">
	<header>
		<h2 class="modal-title">Barre en bas</h2>
	</header>
	<ul class="list-inline">
		<li>
			<button class="btn btn-default" type="button">Bouton 1</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Bouton 2</button>
		</li>
		<li>
			<button class="btn btn-default" type="button">Bouton 3</button>
		</li>
	</ul>
</section>
