- Passer au contenu principal
- Passer à « À propos de ce site »

# Data Inview

- Documentation
- Questions ou commentaires?

## 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: ``

View 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>

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.

## Barre en haut

## Barre en bas

Date de modification :
  2014-07-21