Giter VIP home page Giter VIP logo

josh.js's Introduction

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

πŸ’ Loved it, Press the Star Button πŸ’

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/[email protected]/dist/josh.min.js

//ES5
https://cdn.jsdelivr.net/npm/[email protected]/dist/josh.es5.min.js

UNPKG

//ES6
https://unpkg.com/[email protected]/dist/josh.min.js

//ES5
https://unpkg.com/[email protected]/dist/josh.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 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

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!

josh.js's People

Contributors

mamunhpath avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.