Horizontal & biblioteca de desplazamiento suave vertical-desplazar-animar-a

Vista prévia

Descripción

La biblioteca de JavaScript de animación de desplazamiento se anima a desplazarse a un punto especificado dentro del documento.

Soporta desplazamiento horizontal y vertical.

Funcionamiento

Instala e importa la librería en tu JS principal.

# NPM
$ npm install scroll-animate-to --save

import ScrollTo from 'scroll-animate-to'

O incluya el archivo JavaScript compilado ' Scroll-Animate-to. min. js ' en la página.

<script src="scroll-animate-to.min.js"></script>

Cree un nuevo objeto ' ScrollTo ' y especifique el elemento de destino al que se desplaza la página.

let myScroll = new ScrollTo({


target: document.getElementById('target')
})

Desplácese por la página hasta este elemento de destino.

myScroll.scroll()

Aplicar una función de aceleración personalizada a la animación.

let myScroll = new ScrollTo({


target: document.getElementById('target'),


animationFn: 'easeIn' // "easeIn", "easeOut", "easeInOut", "linear"
})

Establezca la duración de la animación. Predeterminado: 1000ms.

let myScroll = new ScrollTo({


target: document.getElementById('target'),


duration: 2000
})

Establezca el eje en el que debe desplazarse la página. Predeterminado: y (vertical).

let myScroll = new ScrollTo({


target: document.getElementById('target'),


axis: 'x'
})

Especifique el contenedor principal. Default: toda la ventana.

let myScroll = new ScrollTo({


target: document.getElementById('target'),


container: 'window'
})

Ejecute una devolución de llamada cuando finalice el desplazamiento.

let myScroll = new ScrollTo({


target: document.getElementById('target'),


callback: function(){}
})