なかなか良さそうだったので備忘録。最近GmailでUIが少し変更されましたが、その際に使い方をオーバーレイで教えてくれるようになっていました。そんなシンプルなサイトツアーを実装できる、というスクリプトです。
jQuery依存のスクリプトです。Gmailの方はスクショ取り忘れたのでご自身でお確かめ下さい。
Chardin.js
上記のようにラインを引いた場所の解説分をオーバーレイで表示する、というもの。
元はこうなってます。ボタンを押すとオーバーレイとライン、テキストが表示される、という仕組み。
<p data-intro="hogehoge" data-position="right">
テキストや表示場所はカスタムデータ属性で指定します。
結構いいかもしれない。シンプルで分かりやすいですね。デモとスクリプトは以下よりどうぞ。
