Reveal Elements With 19 CSS3 Powered Animations – ScrollJS

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

Preview:

Reveal Elements With 19 CSS3 Powered Animations – ScrollJS

Description:

ScrollJS is a tiny JavaScript library that provides a 19 CSS3 powered reveal animations for any elements when scrolling.

Animations Included:

  1. fade
  2. fade-up
  3. fade-down
  4. fade-left
  5. fade-right
  6. fade-up-left
  7. fade-down-left
  8. fade-down-right
  9. fade-up-right
  10. flip-left
  11. flip-up
  12. flip-right
  13. flip-up-right
  14. flip-down-right
  15. flip-up-left
  16. flip-down-left
  17. flip-down
  18. scale-up
  19. 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>

You Might Be Interested In:


Leave a Reply