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

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

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

サイトのキャプチャ

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の両方で指定できます。

top of page

©2017 coliss