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との事です