• かちびと.net

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

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

Chardin.js


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


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

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

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

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

Chardin.js

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services