Data Inview

Intention

Créer des panneaux de contenu de position fixe qui sont conditionnellement affichées quand la page est défiler et redimensionner.

Exemple avec des barres conditionnelle

Section avec une barre en bas conditionnelle

Une barre sera affichée en bas lors de cette section est partiellement hors de la clôture.

L'état d'affichage :

Visualiser le code
<section class="wb-inview bar-demo" data-inview="barre-bas">
	<h3 class="no-gutter">Section avec une barre en bas conditionnelle</h3>
	...
</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>
	...
</section>

Section avec une barre en haut conditionnelle

Une barre sera affichée en haut lors de cette section est entièrement hors de la clôture (class="show-none").

L'état d'affichage :

Visualiser le code
<section class="wb-inview show-none bar-demo" data-inview="barre-haut">
	<h3 class="no-gutter">Section avec une barre en haut conditionnelle</h3>
	...
</section>

<section id="barre-haut" class="wb-overlay modal-content overlay-def wb-bar-t">
	<header>
		<h2 class="modal-title">Barre en haut</h2>
	</header>
	...
</section>

Exemple avec des animations CSS

Liste des animation CSS supporté

  • class="pop"
  • class="fade"
  • class="slide"
  • class="slidefade"
  • class="slidevert"

Effectuer une animation inversé en ajoutant la classe reverse avec la classe de l'animation CSS.

Section qui cause la section suivante à apparaître ou disparaître

La section suivante va apparaître lorsque cette section sera partiellement hors de la fenêtre.

L'état d'affichage :

Visualiser le code
<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>
	...
</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>
	...
</section>

Section qui va apparaître / disparaître id="fade-effect"

Cette section apparaît et disparaît en fonction de l'état de l'affichage de la section précédente.

Section qui va apparaître / disparaître id="fade-effect2"

Cette section apparaît et disparaît en fonction de l'état de l'affichage de la section suivante.

Section qui cause la section précédente à apparaître ou disparaître

La section précédente va apparaître lorsque cette section sera partiellement hors de la fenêtre. (avec class="show-none").

L'état d'affichage:

Visualiser le code
<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>
	...
</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>
	...
</section>

Section qui glisse vers l'intérieur id="slide-effect1" seulement

Cette section apparaît en fonction de l'état de l'affichage de la section suivante.

Section qui cause la section précédente à apparaître

La section précédente va apparaître lorsque cette section sera partiellement hors de la fenêtre (avec class="show-none"), et restez à la place.

View state:

Visualiser le code
<section id="slide-effect1" class="slide in-only bar-demo">
	<h3 class="no-gutter">Section qui glisse vers l'intérieur</h3>
	...
</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 seulement</h3>
	...
</section>

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Date de modification :