ブラウザのビューポートに要素が入ったことを検知して、アニメーションで表示させるJavaScriptライブラリ［Animon］の使い方を紹介します。

JavaScriptファイルの容量はなんと「0.75kB」と超軽量。
仕組みは、Googleも推奨している Intersection Observer を利用してDOM要素を監視して、あらかじめ設定されたclass名を付与することでアニメーションを実現しています。
jQueryなど他のライブラリに依存せず、単体で動作するのも嬉しいポイントです。

Animon: https://bnthor.github.io/animon-site/

導入方法は以下より。

［Animon］の使い方

［Animon］の導入には2つのファイルが必要です。GitHubからダウンロード可能ですが、CDNでも提供されているので、今回はこちらを利用しましょう。

［Animon］のファイル一式を読み込み

HTMLの任意の箇所に次のコードを記述します。

<link rel="stylesheet" href="https://unpkg.com/animon/dist/animon.css">
<script src="https://unpkg.com/animon/dist/animon.iife.js"<>/script>

この「animon.css」の中身を除いてみると、アニメーションを司るコードが記述されていますね。

  • fadeIn
  • fadeInLeft
  • fadeInRight
  • fadeInDown
  • fadeInUp
  • scaleUp
  • scaleDown

デフォルトは「fadeInLeft」になっています。

HTMLの記述

さて次は、アニメーション表示させたい要素にclass="animonItem"を追加します。

<div class="animonItem">サンプル</div>
スクリプトの実行

最後に［Animon］を実行するコードを記述します。

<script>
	Animon.animon();
</script>

基本的な設定はここまでです。
これでAnimonが動きます。簡単ですね。

オプション設定

アニメーションの実行を遅延させたい場合：

<div class="animonItem" data-delay="500">サンプル（500ミリ秒遅延して実行）</div>

アニメーションの持続時間を変更したい場合：

<div class="animonItem" data-duration="3s">サンプル（3秒かけてアニメーションを実行）</div>

実際に使ってみたサンプルも用意したのでご確認ください。

オンズのサンプル：http://on-ze.com/demo/js-animon/

［Animon］は初心者向けライブラリ

配布されているスクリプトファイルの中身を見てみると、非常に短いコードで構成されているのがわかります。
ある程度JavaScriptに精通している中級者以上の方ならば比較的容易に解読できるでしょう。

初心者の方は上に挙げた方法で実装するべきですが、中級者以上の方は自分で Intersection Observer を利用してカスタマイズしてしまってもいいかもしれません。

なお公式GitHubのほうでもちょっとしたカスタムの方法が紹介されています。

Animon GitHub : https://github.com/bnthor/animon

こちらも合わせて確認してみてください。

動くWebデザインアイディア帳