Biblioteca de animaciones de desplazamiento flexible declarativa-Deligueros. js

Vista prévia

Descripción

Deligueros. js es un ligero, declarativo, flexible, de dependencia cero JavaScript animación activada por scroll biblioteca.

La biblioteca permite aplicar animaciones interactivas a cualquier elemento cuando se hacen visibles en la ventanilla. Es compatible con dispositivos móviles y de escritorio. Se degrada con gracia a su estilo predeterminado.

Funcionamiento

Importe la versión minimizada de la biblioteca Deligueros. js en el documento.

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

Agregue el atributo ' Data-delighter ' a sus elementos.

<div class="demo" data-delighter>

...
</div>

Aplica tus propias animaciones CSS3 al elemento.

.demo.delighter {

transition: all .3s ease-out;

transform: translateX(-100%);

opacity: 0;
}

.demo.delighter.started {

transform: none;

opacity: 1;
}

.demo.delighter.started.ended {

border: solid red 10px;
}

También puede especificar la posición de desplazamiento (umbral de inicio/detención) en la que desea desencadenar la animación en el atributo ' Data-delighter '.

<div data-delighter="start:0.3;end:0.95">

...
</div>

Todas las opciones de configuración predeterminadas.

{

attribute:
'data-delighter',

classNames: ['delighter', 'started', 'ended'],

start:


0.75, // default start threshold

end:



0.75, // default end threshold

autoInit:
 true
// initialize when DOMContentLoaded
}