ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近、スクロールと連動するアニメーションを行うWebサイトが増えています。主にLPのような広告系のところに多いですが、スクロールに合わせて制御するのはとても大変です。

今回紹介するAnimateはDOMが表示されたタイミングで発火するイベントを追加できるJavaScriptライブラリです。

Animateの使い方

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

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

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

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

Animate

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

 

MOONGIFTの関連記事

  • DevRel
  • Com2