[JS]実装は簡単！ページの使い方の説明などをかっこよくオーバーレイで表示するシンプルなスクリプト -Chardin.js

ページ上に配置した要素それぞれに、説明などを添えるためのオーバーレイを作りだすシンプルなjQueryのプラグインを紹介します。

Chardin.js
Chardin.js -gitHub
背景ホワイト：ビフォー、背景ブラック：アフター

• Chardin.jsのデモ
• Chardin.jsの使い方

Chardin.jsのデモ

デモページのブルーのボタン「See it in Action」ボタンをクリックします。

デモページ

タイトル、画像、ボタン、リンクなどにオーバーレイで注釈を表示します。

デモページ：オーバーレイ表示

何もない箇所をクリックすると、オーバーレイが消えます。

デモページ：オーバーレイ非表示

Chardin.jsの使い方

Step 1: 外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。

<link href="chardinjs.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="chardinjs.min.js"></script>

Step 2: オーバーレイで表示する内容を加える

通常通り配置したページの要素に、オーバーレイで表示する内容を加えます。

<img
  src="img/chardin.png"
  data-intro="オーバーレイで表示するテキスト"
  data-position="right" />

「data-intro」に表示するテキスト、「data-position」に表示する方向を記述します。方向は「left, top, right, bottom」の4種類です。

Step 3: スクリプトの実行

セットアップが終了したら、スクリプトを実行します。

$('body').chardinJs('start')