Data Inview

Needs translation

Purpose

Displays an overlay when a section moves out of the viewport.

Working example

How to implement

Add the wb-inview class to an element.

<section class="wb-inview">
	...
</section>

Handle the view state changes using one of the following approaches:
1. Overlays: You can open and close overlays based upon an element's view state.
  1. Add an overlay with a unique id. See the overlay documentation for further details.
  2. Add the data-inview attribute to the element with the value being the unique id of the overlay added in the previous step.
  3. Optional: Add the show-none class to the element to make the overlay only open when the element is fully out of view (default is partially out of view).
2. Show/hide content: You can show/hide content with CSS transitions, based upon an element's view state.
  1. Add an element with a unique id.
  2. Add a CSS transition class to the element added in the previous step (e.g., fade, slide, slidevert, etc.)
  3. Optional: Reverse the transition by adding the reverse class with the CSS transition.
  4. Add the data-inview attribute to the element with the wb-inview class with the value being the unique id of the element with the CSS transition class.
  5. Optional: Add the show-none class to the wb-inview element, the CSS transition only occur when the wb-inview element is:
    - located Before and fully out of view (default is partially out of view)
    - located After and partially out of view (default is fully out of view)
3. Events: You can handle the view state change events through JavaScript.
  1. Add an event handler to listen for each of the view state changes:
```
$( document ).trigger( "all.wb-inview partial.wb-inview none.wb-inview", function( event ) {
	if ( event.namespace === "wb-inview" ) {
		switch ( eventType ) {

		case "all":
			// event.target is a wb-inview element that has become completely visible
			break;

		case "partial": {
			// event.target is a wb-inview element that has become partially hidden
			break;

		case "none":
			// event.target is a wb-inview element that has become completely hidden
		}
	}
});
```

Événements de changement de l'état d'affichage

L'état d'affichage de cette section est identifié ci-dessous via JavaScript.

L'état d'affichage :

HTML

<section class="wb-inview bar-demo">
	<h3 class="no-gutter">Événements de changement de l'état d'affichage</h3>
	...
</section>

JavaScript

(function( $, wb ) {
"use strict";

wb.doc.on( "all.wb-inview partial.wb-inview none.wb-inview", function( event) {
	if ( event.namespace === "wb-inview" ) {
		$( event.target ).find( ".view-state-status" ).html( event.type );
	}
});

})( jQuery, wb );

Configuration options

Option	Description	How to configure	Values
`data-inview`	Identifies the element to trigger a change on (uses the unique id of the element).	Add the `data-inview` attribute with the value being the unique id of the element to trigger a change on.	Unique id of the target element
`show-none`	Overrides the overlay/CSS transition trigger to only occur when: the element is completely hidden, if located before. the element is partially hidden, if located after.	Add the `show-none` class to the element.	n/a

Events

Event	Trigger	What it does
`wb-init.wb-inview`	Triggered manually (e.g., `$( ".wb-inview" ).trigger( "wb-init.wb-inview" );`).	Used to manually initialize the Data Inview plugin. Note: The Data Inview plugin will be initialized automatically unless the required markup is added after the page has already loaded.
`wb-ready.wb-inview` (v4.0.5+)	Triggered automatically after the Data InView plugin has initialized.	Used to identify where the Data InView plugin was initialized (target of the event) `$( document ).on( "wb-ready.wb-inview", ".wb-inview", function( event ) { });` `$( ".wb-inview" ).on( "wb-ready.wb-inview", function( event ) { });`
`all.wb-inview` (v4.0.4+)	Triggered automatically when a `wb-inview` element becomes completely visible.	Used to identify that the view state of a `wb-inview` element has changed to `all`. `$( document ).on( "all.wb-inview", ".wb-inview", function( event ) { });` `$( ".wb-inview" ).on( "all.wb-inview", function( event ) { });`
`partial.wb-inview` (v4.0.4+)	Triggered automatically when a `wb-inview` element becomes partially hidden.	Used to identify that the view state of a `wb-inview` element has changed to `partial`. `$( document ).on( "partial.wb-inview", ".wb-inview", function( event ) { });` `$( ".wb-inview" ).on( "partial.wb-inview", function( event ) { });`
`none.wb-inview` (v4.0.4+)	Triggered automatically when a `wb-inview` element becomes completely hidden.	Used to identify that the view state of a `wb-inview` element has changed to `none`. `$( document ).on( "none.wb-inview", ".wb-inview", function( event ) { });` `$( ".wb-inview" ).on( "none.wb-inview", function( event ) { });`
`wb-ready.wb` (v4.0.5+)	Triggered automatically when WET has finished loading and executing.	Used to identify when all WET plugins and polyfills have finished loading and executing. `$( document ).on( "wb-ready.wb", function( event ) { });`

Source code

Data Inview plugin source code on GitHub

Signaler un problème sur cette page

Date de modification :: 2014-08-04

Sélection de la langue

Recherche