スクロールに応じて任意の要素をアニメーションさせる超軽量スクリプト・「animon」

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となっていました。

animon