[JS]縦長のスクロールページに使いたい便利なスクリプト -isInViewport.js
Post on:2014年4月4日
sponsors
縦長や横長のスクロールを前提にしたページで、特定の要素がビューポートにあるかどうかを調べ、ビューポートに入ったらスタイルシートを適用できるjQueryのプラグインを紹介します。
isInViewport.jsのデモ
デモは、Chrome, Safari, Firefox, Opera, IEは6+でご覧ください。
デモは2種類あり、まずはベーシック。
div要素が縦に並べてあるだけのページで、最初は背景のカラーが全てグレーです。スクロールするとビューポート内にある2番目のdivのみ明るいグレーになります。
アドバンスではビューポートを上から100px狭く設定し、適用しています。
※ベーシックにもスクロールするとこの機能が発動します。
isInViewport.jsの使い方
Step 1: 外部ファイル
jquery.jsと当スクリプトをhead内に外部ファイルとして記述します。
<head> ... <script src="jquery.min.js"></script> <script src="isInViewport.min.js"></script> </head>
Step 2: HTML
HTMLは特に意識する必要はありません、通常通り実装します。
<div> ... </div> <div> ... </div>
Step 3: JavaScript
要素がビューポートに入ったかどうかチェックする時の基本書式は下記のようになります。
$( 'selector:in-viewport' )
例えば、div要素がビューポートに入った時に背景カラーをレッドにする場合は、下記のように記述します。
$( 'div:in-viewport' ).css( 'background-color', 'red' );
オプションの「tolerance」では、要素ごとにビューポートの許容誤差を設定できます。
$( 'selector:in-viewport( tolerance )' )
div要素のみビューポートに100pxの誤差を与える場合は下記のようになります。
$( 'div:in-viewport( 100 )' ).css( 'background-color', 'red' );
sponsors
