Josh.js
A JavaScript library to animate content on page scroll
- No jQuery Dependency
- Written on ES6(Compiled ES5 version available)
- Very much lightweight, Only 2KB
😘 - Animate using Animate.css library
- You can use your own CSS animation library
- Work on newly created DOM
See it in action!
Installation
Using NPM
npm install joshjs
Using HTML 〈script〉 tag
<script src="js/josh.min.js">
// Or use ES5
<script src="js/josh.es5.min.js">
CDN
jsDelivr
//ES6
https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js
//ES5
https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.es5.min.js
UNPKG
//ES6
https://unpkg.com/joshjs@1.0.0/dist/josh.min.js
//ES5
https://unpkg.com/joshjs@1.0.0/dist/josh.es5.min.js
Usage
HTML
<div class="josh-js" data-josh-anim-name="fadeInUp">A JavaScript library to animate content on page scroll.</div>
// You have to provide below data attribute with animation name from Animate.css library or your own library
data-josh-anim-name="fadeInUp"
How to get animation name
Go to Animate.css website. Copy the animation class name from right panel, you will get class name like "animate__backInDown" remove "animate__" you get animation name like "backInDown" add this to above data attribute.
CSS
Add this css file to your HTML file.
<link rel="stylesheet" href="css/animate.css" />
JavaScript
const josh = new Josh();
If you write HTML, added CSS file and called JavaScript like above so that you are good to go!
Advanced usage
HTML
<div
class="element josh-js"
data-josh-anim-name="lightSpeedInRight"
data-josh-duration="1500ms"
data-josh-anim-delay="3.5s"
data-josh-iteration="infinite"
>
Written on ES6
</div>
JavaScript
const josh = new Josh({
// DOM CSS class to Animate, default is "josh-js"
initClass: "josh-js",
// Animation CSS class from Animate.css library
animClass: "animate__animated",
// Element distance of viewport to triggering the animation. default is 0.2 means 20% of element view animation will trigger
offset: 0.2,
// Animation will trigger on Mobile or not. Default is true
animateInMobile: true,
// Animation will trigger on newly added element or not. Default is false
onDOMChange: false,
});
Dependencies
Browser Support
All modern browsers are supported. Because of written in ES6 and modern web API Internet Explorer will not support. Here you can check supported browser:
IntersectionObserver Not supported by IE.
MutationObserver Supported by IE 11.
If you want to support Internet Explore so that you can use Polifill for IntersectionObserver.
IntersectionObserver Polifill 1
IntersectionObserver Polifill 2
Developer
Developed by Al Mamun
Want to contribute? Great!
Fork it, clone it to your PC, fix the issue, push to your repository, Make a pull request to this repository. You are done!
License
MIT
Free Software, Hell Yeah!
