Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」

Josh.js

Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです

他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です

使い方も簡単です

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/joshjs@1.0.0/dist/josh.min.js"></script>

Animate.cssとJosh.jsを読み込みます

const josh = new Josh({
        initClass: "foo",
        animateInMobile: true,
        offset: 0.3,
        onDOMChange: true
      });

セッティングします

<div
        class="foo"
        data-josh-anim-name="zoomInDown"
        data-josh-anim-delay="3.5s"
      >
        hoge
      </div>

各要素でもセッティングすれば完了です。簡単で良いですね。ライセンスはMITとの事です

Josh.js