これなら実装がすごく簡単！スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon

Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。

HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画像が右・左からアニメーションでふわりと表示されたり、フェードインやスケールアップ・ダウンなどが簡単に実装できます。

Animon
Animon -GitHub

• Animonの特徴
• Animonのデモ
• Animonの使い方

Animonの特徴

Animonは、Webページ上のDOM要素がビューポートに表示された時に、指定したDOM要素をアニメーション化させるJavaScriptの超軽量（0.9kB）ライブラリです。単独で動作し、他のスクリプトへの依存はありません。

実装は簡単で、JavaScriptとCSSを外部ファイルとして記述し、あとはHTMLにclassを加えるだけです。アニメーションの持続時間や遅延時間も設定でき、HTMLにdata属性で指定するだけです。

Animon

アニメーションの種類

Animonで現在利用できるエフェクトは、下記の通りです。

• fadeIn
• fadeInLeft (default)
• fadeInRight
• fadeInDown
• fadeInUp
• scaleUp
• scaleDown

各エフェクトは持続時間や開始時間を簡単に設定でき、複数のエフェクトを同時に使用することもできます。例えば、見出しは上からフェードインさせて、コンテンツは下からフェードインさせるというのも簡単です。

また、以下の機能にも対応予定です。

• エフェクトを増やす
• レガシーブラウザのサポート
• letter by letterエフェクト
• 1回だけアニメーション化するオプション

Animonのデモ

Animonのデモでは、コンテンツがビューポートに表示されるとさまざまなアニメーションで表示されます。まずは、右からフェードイン。

Animon デモページ

続いて、左からスケールアップ。

Animon デモページ

コンテンツがぎゅっとなるスケールダウン。

Animon デモページ

フェードインとスケールダウンのミックス。

Animon デモページ

上からフェードインと右からフェードインのミックス。

Animon デモページ

Animonの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

animon.iife.jsとanimon.cssはどちらもCDN経由で利用できます。

Step 2: JavaScript

スクリプトを初期化し、実行します。

Step 3: HTML

アニメーションを適用する要素に.animonItemを加えます。

アニメーションのタイミング（遅延時間）や持続時間もHTMLで設定できます。

オプション

デフォルトアニメーションだけでなく、独自のアニメーションを適用することもできます。新しいクラス（例: .is-visible）を作成して定義します。