Interacciones basadas en desplazamiento de rendimiento-scrollama. js
| Autor: | russellgoldenberg |
|---|---|
| Views Total: | 1,426 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 15, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
scrollama. js es una biblioteca de JavaScript para crear interacciones basadas en desplazamiento que utilizan Intersection Observer API para de detección de posición de desplazamiento Performant.
Instalación
# NPM $ npm install scrollama --save
import scrollama from 'scrollama'
Funcionamiento
Cree una nueva instancia de scrollama.
const myScroller = Scrollama();
Configure la instancia con los siguientes parámetros.
myScroller.setup({
// required
// step elements that will trigger changes
step: '.scroll__text .step',
// required
container: '.scroll',
// required (for sticky)
graphic: '.scroll__graphic',
// optional, default = 0.5
offset: 0.5,
// whether to fire incremental step progress updates or not.
progress: false,
// the granularity of the progress interval, in pixels
threshold: 4,
// whether to preserve step triggering order if they fire out of sync (eg. ensure step 2 enters after 1 exits).
order: true,
// Only trigger the step to enter once then remove listener.
once: false,
// optional, default = false
debug: false
}) Event handlers.
myScroller.setup( // ... }) .onStepEnter(callback) .onStepExit(callback) .onContainerEnter(callback) .onStepProgress(callback) .onContainerExit(callback)
API methods.
myScroller.setup( // ... }) // Get or set the offset percentage myScroller.offsetTrigger(number) // Get latest dimensions the browser/DOM myScroller.resize() // Resume observing for trigger changes myScroller.enable() // Stop observing for trigger changes. myScroller.disable()
Registro de cambios
v1.4.4 (10/15/2018)
- elemento como selector
