animon
animonはスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプトです。非依存型で単体で動作します。
ScrollTrigger.jsの機能をやや抑えて軽量化した、みたいな感じでした。使い方も導入もとても簡単です。
< link rel = "stylesheet" href = "https://unpkg.com/animon@1.0.1/dist/animon.css" /> < script type = "text/javascript" src = "https://unpkg.com/animon@1.0.1/dist/animon.iife.js" ></ script > < script type = "text/javascript" > Animon.animon(); </ script > |
CSSとJSを読み込んで初期化。これで準備完了です。設定は加須亜夢データ属性で行います。
< h1 class = "animonItem" >左からフェードイン</ h1 > |
アニメーションを付与したい要素のclassにanimonItem
を追加します。
< h1 class = "animonItem" data-effect = "fadeInRight" data-duration = "4s" data-delay = "800" >右からフェードイン</ h1 > |
data-effect
でエフェクトの種類、data-duration
で実行完了までかかる時間、data-delay
で遅延時間を設定できます。
既存のWebサイトにも簡単に導入できます。凝ったものや複雑なものは作れませんが、簡単なエフェクトなら軽いし楽で良いですね。ライセンスはGithubには明示されていませんでしたがnpmではISCとなっていました。