[JS]実装も簡単！ページ内の次にどこを見るかアニメーションでガイドするスクリプト -Pageguide

サイト構築 -JavaScript

Post on:2012年6月8日

Pageguideのデモ

デモは右上の「page guide」をクリックすると、始まります。

Pageguideのデモページ

ガイドは、ページ内のエレメントをハイライトして順番を表示し、ナビゲートするパネルを下部に表示します。

下部のパネルのアローをクリックすることで、次に見るべきコンテンツに移動します。

[ad#ad-2]

Pageguideの使い方

実装は4ステップです。

Step 1: 外部ファイル

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

<link rel="stylesheet" href="stylesheets/pageguide.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="javascripts/pageguide.js"></script>

Step 2: JavaScript

スクリプトを初期化します。

<script type="text/javascript">
$(document).ready(function() {
	tl.pg.init();
});
</script>

Step 3: エレメントの選択

ガイドの対象にするエレメントを選択します。
idでもclassでも可能で、そのエレメントが指定できるようにします。

<div class="first_element_to_target">1番目のガイドの対象</div>
<div id="second_element_to_target">2番目のガイドの対象</div>

Step 4: ナビゲーションの作成

ページの下部に表示されるナビゲーションパネルを作成します。
Step 3で作成した対応エレメントは「data-tourtarget」で指定します。

<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE">
	<li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
		<div>1番目の説明</div>
	</li>
	<li class="tlypageguide_left" data-tourtarget="#second_element_to_target">
		<div>2番目の説明</div>
	</li>
	...
</ul>