順番に特徴を説明するサイトツアーを印象的にできるJavaScript「Intro.js」

WEBサービスや商品特徴などを紹介するページでは、意図した順に閲覧してもらいたいことがあるかと思います。
Intro.jsを利用すると要素ごとに順番に見せられることが可能になります。
また周りが透過されますので、より集中して情報を見てもらうことができそうです。

sponsors

使用方法

Intro.jsからファイル一式をダウンロードし、以下のように書きます。

<link href="introjs.css" rel="stylesheet" />
    <!--[if lte IE 8]>
    <link href="introjs-ie.css" rel="stylesheet" />
    <!-- <![endif]-->
<script type="text/javascript" src="intro.js"></script>
あとは要素に以下のようにdata-stepとdata-introを記述するだけなので、簡単に既存サイトにも埋め込みが可能です。

<p data-step="1" data-intro="さあ始めましょう!SKIPを押して進みましょう"></p>
<p data-step="2" data-intro="ここは2番目ですよ"></p>
<!-- 以下要素分 -->
また、data-positionを使うと表示場所を調整できます。
data-positionはデフォルトが下に表示される「botttom」となっており、その他「top」「right」「left」があります。
なお、ステップを始めるボタンは以下のようにしてあげます。
<a href="javascript:void(0);" onclick="javascript:introJs().start();">ステップを見る</a>

サンプル

ステップを見る

さあここはなんだ?
おっとやられた・・・

終わり

sponsors

Javascriptサンプルページ一覧
skuare.net