Alternar clases CSS cuando un elemento se desplaza a la vista-onscroll-efecto

Vista prévia

Descripción

La biblioteca JavaScript de efecto onscroll que agrega o quita automáticamente las clases CSS de un elemento determinado cuando se desplaza hacia abajo o hacia arriba en la Página Web.

Ideal para animar elementos mediante propiedades CSS3 cuando se desplazan a la vista.

Funcionamiento

Instale & descargar.

# NPM
$ npm install onscroll-effect --save

Importe el efecto onscroll.

import "onscroll-effect";

O incluya el script ' onscroll-Effect. min. js ' en la parte inferior de la Página Web.

<script src="/dist/onscroll-effect.es6.min.js"></script>

Agregue el atributo ' Data-SCROLL ' al elemento de destino.

<div data-scroll>

 Element To Animate
</div>

De forma predeterminada, la biblioteca agrega automáticamente la clase '. is-Outside ' al elemento cuando está fuera de la ventanilla. Para que pueda aplicar sus propias animaciones CSS al elemento una vez que se desplaza a la vista.

.is-outside::before {

transform: translateY(10em);
}

Se le permite usar una clase CSS personalizada en lugar de '. is-Outside '.

<div data-scroll="your own class">

 Element To Animate
</div>

Determine si desea no repetir la animación.

<div data-scroll="your own class"


 data-scroll-repeat="true">



Element To Animate
</div>

<div data-scroll="your own class"


 data-scroll-repeat="5">



Element To Animate
</div>

Establezca la distancia desde la parte superior para desencadenar la animación.

<div data-scroll="your own class"


 data-scroll-repeat="true"


 data-scroll-offset="100">



Element To Animate
</div>

Registro de cambios

02/26/2019

• v1.1.3: bugfix