on:2016年9月5日sponsorsページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。gzip)のスクリプトを紹介します。すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。-GitHubin-view.jsのデモin-view.jsの使い方in-view.jsのデモデモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。デモページトリガーはビューポート内での有無のため、マウス操作でもキーボード操作でも動作します。ビューポートのサイズを変更しても快適に、動作します。外部ファイル当スクリプトを外部ファイルとして記述します。HTMLHTMLは通常の実装に、要素を指定できるようclassやidを加えておきます。JavaScript対象となる要素を指定し、ビューポートに入った時(enter)と出る時(exit)にエフェクトを記述します。0.5;});スクロールを繰り返した時に、その度にエフェクトを表示する時は「on」を使います。doSomething);繰り返しではなく、一度だけの時は「once」を使います。doSomething);スクリプトのオプションでは他に、要素がビューポートにあるかどうかの判定、オフセットの変更、Windowのスクロール・リサイズ・ロードのイベントの判定などにも対応しています。