Está en el comprobador de ventana gráfica con JavaScript puro-blanco-en-vista

Vista prévia

Descripción

blanco-en-vista es una biblioteca de JavaScript muy pequeña que comprueba si un elemento está en la ventanilla y agrega clases CSS coincidentes a ella en función del estado de entrada o de salida actual.

Install the white-in-view:

# NPM
$ npm install white-in-view

# Bower
$ bower install white-in-view

Funcionamiento

Importe el blanco en la vista en el proyecto o incluya el archivo JavaScript White-in-View. js en el documento.

<script src="white-in-view.js"></script>

Cree una nueva instancia y especifique el elemento de destino que desea mantener el seguimiento de la posición.

var myInstance = new WhiteInView('.myElement');

Inicializar la biblioteca.

myInstance.init();

Eso es todo. La biblioteca agregará automáticamente la clase CSS ' blanco-es-en-vista ' a su elemento cuando se entra en la vista para que pueda aplicar sus propios estilos CSS o animaciones a ella como sigue:

.white-is-in-view { ... }

Cuando el elemento se desplaza fuera de la vista, la clase CSS '. White-is-out-View ' se aplicará.

.white-is-out-view { ... }

Personalice el comprobador de ventana gráfica con los siguientes atributos de datos de HTML5:

• Data-offset-Top = "50 ″: el desfase vertical desde la parte superior
• Data-offset-Bottom = "150 ″: el desfase vertical desde la parte inferior
• Data-Percentage = "true": si los valores de desfase están en porcentaje

<div class="myElement"



data-offset-top="50"



data-offset-bottom="150"



data-percentage="true">


 ...
</div>

Detectores de eventos disponibles.

document.querySelector('.myElement').addEventListener('whiteInView.onElementInView', function() {

// Do something
});

document.querySelector('.myElement').addEventListener('whiteInView.onElementOutView', function() {

// Do something
});