サイトツアーやチュートリアルをIntro.jsで簡単に実装する

サイトやサービスの利用方法を、順を追ってユーザーに説明したい際にIntro.jsが役に立ちます。

まずはIntro.jsから一式をダウンロードしてください。
デモ画面もこちらの「Show me how」から確認できます。

次に<head>内に、ダウンロードした以下の2ファイルを読み込みます。

<script src="intro.js"></script>
<link rel="stylesheet" href="introjs.css" type="text/css">

あとは要素を見せたい順番に data-intro=”説明テキスト” data-step=”1″ をつけるだけです。

<h1 data-intro="最初に見せたい要素につけるテキスト" data-step="1">タイトル</h1>
<div data-intro="次に見せたい要素につけるテキスト" data-step="2">本文</div>