Desvanecer elementos en secuencia en el desplazamiento de página-Fadin
| Autor: | dev-warner |
|---|---|
| Views Total: | 76 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 9, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Fadin es una pequeña biblioteca de JavaScript que se desvanece secuencialmente en un grupo de elementos en el desplazamiento de página. Escrito en Typescript.
Funcionamiento
Instalación.
# NPM $ npm install fadin --save
O importar directamente la biblioteca de Fadin desde una CDN.
<script src="https://unpkg.com/fadin"></script>
Inicialice el Fadin en los elementos de destino.
<div class="fade item">1</div> <div class="fade item">2</div> <div class="fade item">3</div>
document.addEventListener("DOMContentLoaded", () => {
fadin('.fade')
}); Aplique un fundido suave en la animación a los elementos cuando se desplaza a la vista.
.fade {
opacity: 0;
transition: 0.3s opacity;
} Aplique un retardo al fundido en la animación.
document.addEventListener("DOMContentLoaded", () => {
fadin('.fade', { delay: 200 })
}); O a través atributo de retardo de datos:
<div class="fade item" data-delay="0.6s">3</div>
