[JS]ページをスクロールし、コンテンツを読み終えたくらいにメッセージやFacebookのパネルを表示するスクリプト -End Page Box

ページをスクロールし、コンテンツを読み終えたくらいやページの途中や下など指定した範囲に、メッセージやFacebookなどを配置したパネルをアニメーションでかっこよく表示するjQueryのプラグインを紹介します。

昨日の記事「最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ」でもよかったのですが、なんせ公開されたのが翌日なので。

End Page Box

• End Page Boxのデモ
• End Page Boxの使い方

End Page Boxのデモ

デモは5つあり、パネル表示のさまざまなエフェクト、また表示するスクロールの範囲も設定できるので複数のパネルを表示することもできます。

デモページ

各デモは、ページを下の方にスクロールしてください。

Demo 1

標準的なデモで、下の方にスクロールするとパネルを表示します。

Demo 2

パネルが上からすとーんと落ちて表示されます。

Demo 3

パネルがすっーとスライドして表示されます。

Demo 4

Facebookを配置したパネルが下部からスライドして表示されます。

Demo 5

トリガーを複数設定したデモで、パラグラフの奇数番目ごとにパネルが表示されます。

End Page Boxの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.endpage-box.js"></script>
<link rel="stylesheet" type="text/css" href="css/endpage-box.css" />

Step 2: HTML

コンテンツは通常通りに実装し、パネルは</body>の上あたりに配置しておきます。

  ...
  ...
  <div id="endpage-box-1" class="endpage-box">...</div>
</body>

複数のパネルを表示する際は、下記のように。

  ...
  ...
  <div id="endpage-box-1" class="endpage-box">...</div>
  <div id="endpage-box-2" class="endpage-box">...</div>
</body>

Step 3: JavaScript

表示するパネルをjQueryのセレクタで指定し、スクリプトを実行します。

$("#endpage-box-1").endpage_box({
  animation: "fade",
  from: "10%",
  to: "30%"
});

「animation」はアニメーションのエフェクト、「from」「to」はパネルを表示する範囲で%とpxの両方で指定できます。