Comprobador de ventana gráfica multiplataforma con JavaScript puro-emergencia. js

Vista prévia

Descripción

emergencia. js es una librería de Comprobador de ventanas gráficas multiplataforma de alto rendimiento que < a href = "https://wikicss.com/tag/viewport/" > detecta si los elementos HTML están en la ventanilla , y realiza acciones personalizadas cuando los elementos están visibles y/o ocultos.

Instalación

# NPM
$ npm install emergence.js --save

# Bower
$ bower install emergence.js --save

Funcionamiento

Inserte la versión minimizada de la emergencia. js en la Página Web.

<script src="dist/js/emergence.min.js"></script>

Inicialice la emergencia. js y ya está listo para ir.

emergence.init({

// options here
});

Agregue el atributo Data-emergencia = "Hidden" a cualquier elemento que desee ver para la posición de desplazamiento.

<div class="myElement" data-emergence="hidden"></div>

Aplicar estilos CSS personalizados (por ejemplo, animaciones basadas en CSS3) al elemento cuando se hace visible o invisible a medida que se desplaza por la Página Web.

.myElement[data-emergence=hidden] {

/* ... */
}

.myElement[data-emergence=visible] {

/* ... */
}

O realizar acciones personalizadas cuando el elemento se vuelve visible o invisible a medida que se desplaza por la Página Web.

emergence.init({

callback: function(element, state) {


if (state === 'visible') {



// do something


} else if (state === 'reset') {



// do something


} else if (state === 'noreset') {



// do something


}

}
});

Posibles opciones para personalizar la biblioteca de emergencia. js.

emergence.init({


// parent container

container: window,


// resets state

 reset: true,


// false = disable the library on phones and tablets

handheld: true,


// in milliseconds

throttle: 250,


// determine how much of the element needs to be within the viewport to count as "visible"

elemCushion: 0.15,


// offsets in pixels

offsetTop: 0,

offsetRight: 0,

offsetBottom: 0,

offsetLeft: 0


});

API methods.

// Refire visibility checks outside of the load, scroll and resize events already baked into the plugin
emergence.engage();

// Disable Emergence
emergence.disengage();

Registro de cambios

10/11/2018

• v1.1.2