Author: | dev-warner |
---|---|
Views Total: | 3,152 views |
Official Page: | Go to website |
Last Update: | April 9, 2019 |
License: | MIT |
Preview:

Description:
Fadin is a small JavaScript library that sequentially fades in a group of elements on page scroll. Written in Typescript.
How to use it:
Installation.
# NPM $ npm install fadin --save
Or directly import the Fadin library from a CDN.
<script src="https://unpkg.com/fadin"></script>
Initialize the Fadin on the target elements.
<div class="fade item">1</div> <div class="fade item">2</div> <div class="fade item">3</div>
document.addEventListener("DOMContentLoaded", () => { fadin('.fade') });
Apply a smooth fade in animation to the elements when scrolled into view.
.fade { opacity: 0; transition: 0.3s opacity; }
Apply a delay to the fade in animation.
document.addEventListener("DOMContentLoaded", () => { fadin('.fade', { delay: 200 }) });
Or via data-delay
attribute:
<div class="fade item" data-delay="0.6s">3</div>