Realizar acciones en el desplazamiento de página-desplazarse hacia fuera

Vista prévia

Descripción

Una biblioteca de animación de desplazamiento de JavaScript ligera, multiplataforma y progresivamente mejorada para la Web.

La biblioteca de desplazamiento puede utilizarse para animar elementos dados activando y alterando atributos y clases CSS en el desplazamiento vertical de la página.

Muerto fácil de usar y altamente personalizable.

¿Cómo funciona?

Instale el desplazamiento a través de NPM.

# NPM
$ npm install scroll-out --save

Importe el ScrollOut del paquete.

import ScrollOut from "scroll-out";

O cargue la versión compilada de la biblioteca de desplazamiento hacia fuera en el documento.

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

Inicialice la biblioteca y ya está listo para ir.

ScrollOut({

// options here
});

Agregue el atributo de desplazamiento de datos al elemento que desea animar en el desplazamiento.

<div data-scroll>

Element To Animate
</div>

Anime el elemento utilizando CSS/CSS3.

[data-scroll] {

/* CSS Here */
}

[data-scroll="in"] {

/* CSS Here */
}

[data-scroll="out"] {

/* CSS Here */
}

Opciones de configuración disponibles.

ScrollOut({


// If true, all CSS Variables will be added to the scrolling element and all targets.

 // If false, only the [data-scroll] property will be modified on targets. For more control, see CSS Props Options

cssProps: true,


// The distance in pixels from the top to trigger the animation

offset: 0,


// Decides whether to execute only once

once: false,


// The root element to use when resolving targets

scope: documentElement,


// An optional list of elements or a css selector

targets: '[data-scroll]',


// The ratio of the element that must be visible before it is marked as visible.

threshold: .2


});

Controladores de eventos.

ScrollOut({


onShown: function(element, ctx, scrollingElement) {


/* shown */

},



onHidden: function(element, ctx, scrollingElement) {


/* hidden */

},


onChange: function(element, ctx, scrollingElement) {


/* changes visibility */

}

});