最近、スクロールと連動するアニメーションを行うWebサイトが増えています。主にLPのような広告系のところに多いですが、スクロールに合わせて制御するのはとても大変です。 今回紹介するAnimateはDOMが表示されたタイミングで発火するイベントを追加できるJavaScriptライブラリです。

Animateの使い方

利用例です。下にスクロールしてDOMが表示されたタイミングでアニメーションが実行されています。

下からのスクロールにも対応しています。

Animateは表示範囲に入ったタイミングで呼ばれますので、アニメーションなどは初期化した上で実行開始すれば良いでしょう。アニメーションに限らず、ユーザが読み進めた場所を記録したり、スクロールに合わせて何らかのアクションを実行するのに利用できます。

AnimateはJavaScript製のオープンソース・ソフトウェア（ISC License）です。

Animate bnthor/animon: Animate DOM elements when the appear in the viewport