Seguimiento de la posición de los elementos mediante la intersección de observador-scroller

Vista prévia

Descripción

Scroller es una biblioteca de JavaScript que utiliza intersección Observer API para monitorear la ubicación de la página de una serie de elementos para la narración de desplazamiento.

Funcionamiento

Instale & importar el desplazador.

# NPM
$ npm install @newswire/scroller --save

import Scroller from '@newswire/scroller';

O incluir directamente la versión UMD del desplazador en el documento.

<script src="https://unpkg.com/@newswire/scroller/dist/index.umd.js"></script>

Inicialice la biblioteca y especifique los elementos que se considerarán escenas de este scroller.

<div class="container">

<div class="scene"></div>

<div class="scene"></div>

<div class="scene"></div>

<div class="scene"></div>

<div class="scene"></div>

...
</div>

const myScroller = new Scroller({



scenes: document.querySelectorAll('.scene'),
});

Especificar el elemento contenedor de todas las escenas, esto se agrega a la intersección Observer instancia y, además, desencadena sus propios eventos.

const myScroller = new Scroller({



scenes: document.querySelectorAll('.scene'),



container: document.querySelectorAll('.container')
});

Especifique qué tan lejos de la parte superior/inferior del área visible para desencadenar entra/sale de escenas, representado como un valor entre 0 y 1.

const myScroller = new Scroller({



scenes: document.querySelectorAll('.scene'),



offset: .5
});

Event handlers.

// triggered every time a scene crosses the threshold
myScroller.on('scene:enter', d => {

d.element.classList.add('active');
});

// triggered every time a scene exits the threshold
myScroller.on('scene:exit', d => {

d.element.classList.remove('active');
});

// triggered every time the container crosses the threshold
myScroller.on('container:enter', d => {

d.element.classList.add('active');
});

// triggered every time the container exits the threshold
myScroller.on('container:exit', d => {

d.element.classList.remove('active');
});

// on init
myScroller.on('init', () => {

console.log('Ready');
});