Animación de desplazamiento suave configurable en Vanilla JavaScript-moveTo. js

Vista prévia

Descripción

moveTo. js es una biblioteca de JavaScript ligera que permite desplazarse suavemente entre las secciones de contenido dentro del documento. Alimentado por window. requestAnimationFrame () API y totalmente configurable a través de los atributos de datos y JavaScript.

Instalación

# Yarn
yarn add moveto

# NPM
$ npm install moveto

# Bower
$ bower install moveto

¿Cómo funciona?

Cree un elemento desencadenante apuntando al elemento de destino:

<a href="#target" class="js-trigger">Trigger Link</a>

<!-- Or -->

<button type="button" class="js-trigger" data-target="#target">Trigger Button</button>

Incluya el archivo JavaScript principal moveTo. min. js al final de la página HTML.

<script src="moveTo.min.js"></script>

Regist el elemento desencadenante.

const trigger = document.getElementsByClassName('js-trigger')[0];
moveTo.registerTrigger(trigger);

O inicie la animación de desplazamiento desde la posición actual hasta el punto de anclaje:

const moveTo = new MoveTo();

const target = document.getElementById('target');

moveTo.move(target);

Configuración de la animación de desplazamiento a través de los atributos ' datos ' como se muestra a continuación.

<a href="#target"


class="js-trigger"

 data-mt-duration="300"

 data-mt-easing="easeOutQuart"

 data-mt-easing="tolerance">

 Trigger
</a>

O pasar el objeto de opción como el segundo parámetro para el MoveTo método.

new MoveTo({



// The tolerance of the target to be scrolled


tolerance: 0,



// Duration of scrolling, in milliseconds


duration: 800,



// Ease function name


easing: 'easeOutQuart',



// run after scrolling complete


callback: noop



})

Registro de cambios

v1.8.0 (01/14/2018)

• Corregidos algunos problemas de eslint y algunos nombres de variables cambiados

v1.7.3 (09/23/2018)

• Bugfixed