Author: | samsiriannidev |
---|---|
Views Total: | 508 views |
Official Page: | Go to website |
Last Update: | November 5, 2020 |
License: | MIT |
Preview:

Description:
ScrollJS is a tiny JavaScript library that provides a 19 CSS3 powered reveal animations for any elements when scrolling.
Animations Included:
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-left
- fade-down-left
- fade-down-right
- fade-up-right
- flip-left
- flip-up
- flip-right
- flip-up-right
- flip-down-right
- flip-up-left
- flip-down-left
- flip-down
- scale-up
- scale-down
How to use it:
1. Install & Download the library.
# NPM $ npm i @samsiri/scrolljs --save
2. Load the necessary stylesheet ‘scrolljs.css’ in the document.
<link rel="stylesheet" href="scrolljs.css" />
3. Import the scrolljs.
import scrolljs from '@samsiri/scrolljs';
4. Or load the ‘scrolljs.js’ in the document.
<script src="scrolljs.js"></script>
5. Assign a reveal animation to an element using the ‘scrolljs’ attribute:
<h2 scrolljs="scale-up">Keep Scrolling</h2>
6. Apply the duration and easing options to the reveal animation:
<h2 scrolljs="scale-up|3000|linear">Keep Scrolling</h2>