@mamunhpath/joshjs v1.0.0

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!

💝 Loved it, Press the Star Button 💝

Installation

Using NPM

$ npm install joshjs

Using HTML tag

<script src="js/josh.min.js">
// Or use ES5
<script src="js/josh.es5.min.js">

How to Markup

<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"

JavaScript

const josh = new Josh();

If you markup 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

• animate.css

Browser Support

All morder browser 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

• Github Profile
• Linked In
• Facebook Profile

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!