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>

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.

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>

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.

Détails de la page

Date de modification :: 2014-07-21

Data Inview

Intention

Exemple avec des barres conditionnelle

Section avec une barre en bas conditionnelle

Section avec une barre en haut conditionnelle

Exemple avec des animations CSS

Liste des animation CSS supporté

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

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

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

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

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

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

Détails de la page

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

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

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