サイトやサービスの利用方法を、順を追ってユーザーに説明したい際に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>
