[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js
Post on:2016年9月5日
sponsors
ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。
要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量（1.9kb gzip）のスクリプトを紹介します。
すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。
in-view.jsのデモ
デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。
アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。
トリガーはビューポート内での有無のため、マウス操作でもキーボード操作でも動作します。またビューポートのサイズを変更しても快適に、動作します。
in-view.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src="in-view.min.js"></script> </body> |
Step 2: HTML
HTMLは通常の実装に、要素を指定できるようclassやidを加えておきます。
Step 3: JavaScript
対象となる要素を指定し、ビューポートに入った時（enter）と出る時（exit）にエフェクトを記述します。
|
1 2 3 4 5 |
inView('.someSelector') .on('enter', doSomething) .on('exit', el => { el.style.opacity = 0.5; }); |
スクロールを繰り返した時に、その度にエフェクトを表示する時は「on」を使います。
|
1 |
inView('.someSelector').on('enter', doSomething); |
繰り返しではなく、一度だけの時は「once」を使います。
|
1 |
inView('.someSelector').once('enter', doSomething); |
スクリプトのオプションでは他に、要素がビューポートにあるかどうかの判定、オフセットの変更、Windowのスクロール・リサイズ・ロードのイベントの判定などにも対応しています。
sponsors
