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

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

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

スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScriptライブラリ -Animon

Animon
Animon -GitHub

Animonの特徴

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

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

Animonのデモ

Animon

アニメーションの種類

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

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

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

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

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

Animonのデモ

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

Animonのデモ

Animon デモページ

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

Animonのデモ

Animon デモページ

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

Animonのデモ

Animon デモページ

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

Animonのデモ

Animon デモページ

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

Animonのデモ

Animon デモページ

Animonの使い方

Step 1: 外部ファイル

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

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

Step 2: JavaScript

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

Step 3: HTML

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

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

オプション

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

sponsors

top of page

©2021 coliss