Author: | wanderlima |
---|---|
Views Total: | 143 views |
Official Page: | Go to website |
Last Update: | September 12, 2023 |
License: | MIT |
Preview:

Description:
A lightweight JavaScript scroll animation library that adds high-performance, CSS3-powered fade/slide animations to elements as they scroll into view.
It offers a range of options to activate, delay, and adjust animations to your liking, transforming static elements into an engaging, interactive experience.
How to use it:
1. Install & download.
# Yarn $ yarn add js-scroll-animations # NPM $ npm i js-scroll-animations
2. Import the JS Scroll Animations.
// As ES Module import jsScroll from "js-scroll-animations"; import "js-scroll-animations/styles.css";
<!-- Browser --> <link rel="stylesheet" href="dist/styles.css" /> <script src="dist/index.js"></script>
3. Add the data-jsscroll
attribute to the element to be animated on scroll and choose an animation type of your choice as displayed below:
<div data-jsscroll data-jsscroll-fade-in > Fade In </div> <div data-jsscroll data-jsscroll-slide-top > Slide Top </div> <div data-jsscroll data-jsscroll-slide-bottom > Slide Bottom </div> <div data-jsscroll data-jsscroll-slide-left > Slide Left </div> <div data-jsscroll data-jsscroll-slide-right > Slide Right </div>
4. Config the scroll animation using the following data attributes:
<div data-jsscroll data-jsscroll-fade-in data-jsscroll-delay="0" data-jsscroll-threshold="1.25" >
5. API methods.
// initialize const jsScroll = jsScrollAnimations(); jsScroll.init(); // disable jsScroll.disable(); // reset jsScroll.reset(); // pause jsScroll.pause();
Changelog:
v0.9.2 (09/12/2023)
- Bugfix