新Gmailライクな、オーバーレイを利用したシンプルなWebサイトツアーっぽいのを実装するスクリプト・Chardin.js

Ads

なかなか良さそうだったので備忘録。最近GmailでUIが少し変更されましたが、その際に使い方をオーバーレイで教えてくれるようになっていました。そんなシンプルなサイトツアーを実装できる、というスクリプトです。

jQuery依存のスクリプトです。Gmailの方はスクショ取り忘れたのでご自身でお確かめ下さい。

Chardin.js


上記のようにラインを引いた場所の解説分をオーバーレイで表示する、というもの。


元はこうなってます。ボタンを押すとオーバーレイとライン、テキストが表示される、という仕組み。

<p data-intro="hogehoge" data-position="right">

テキストや表示場所はカスタムデータ属性で指定します。

結構いいかもしれない。シンプルで分かりやすいですね。デモとスクリプトは以下よりどうぞ。

Chardin.js