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