[JS]縦長のスクロールページに使いたい便利なスクリプト -isInViewport.js

縦長や横長のスクロールを前提にしたページで、特定の要素がビューポートにあるかどうかを調べ、ビューポートに入ったらスタイルシートを適用できるjQueryのプラグインを紹介します。

サイトのキャプチャ

isInViewport.js -GitHub

isInViewport.jsのデモ

デモは、Chrome, Safari, Firefox, Opera, IEは6+でご覧ください。

サイトのキャプチャ

デモページ

デモは2種類あり、まずはベーシック。

サイトのキャプチャ

Demo: Basic

div要素が縦に並べてあるだけのページで、最初は背景のカラーが全てグレーです。スクロールするとビューポート内にある2番目のdivのみ明るいグレーになります。

アドバンスではビューポートを上から100px狭く設定し、適用しています。
※ベーシックにもスクロールするとこの機能が発動します。

サイトのキャプチャ

Demo: Advanced

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

top of page

©2018 coliss