ご存知の方は知っている某ドラマで現れる、「ほとけ」風ななにかを自分のサイト内に呼び寄せるjQueryプラグインを作成しました。

デモ

実装サンプルはこちらになります。ページを開いてから数秒後に登場します。
hotoke.jsのサンプルページ

使い方

以下のファイルを表示させたいページに読み込みます。

<link rel="stylesheet" href="hotoke.css">
<script src="jquery-2.2.4.js"></script>
<script src="hotoke.js"></script>

ファイルを読み込むパスはそれぞれ変更してください。
そして使用したいページで以下を記述します。

<script>
$(function(){
  $('body').hotoke();
});
</script>

これで実行されます。

オプションが2つあり、

<script>
$(function(){
  $('body').hotoke({
    timeStart : 3000,
    hotokeImgPath : '../../hotoke.png'
  });
});
</script>

デフォルトでは3000ミリ秒でほとけが呼びかけ始めます。画像はそのHTMLと同階層のhotoke.pngを読み込みます。

最初の呼びかけと、その後のセリフの編集はhotoke.jsを編集します。hotoke.jsの以下の部分を編集してください。ファイルの上部にあります。

//最初の呼び出し文言
var hotokeShout = [
  'ヨ○ヒコー',
  'ヨ○ヒコよー'
];

//ほとけ降臨後の文言
var hotokeWords = [
  'ここにセリフを入れることができます。',
  'セリフ2',
  'セリフ3'
];

ここに文言を追加・編集することで表示されるセリフが変わります。最後の項目以外は文末にカンマが必要です。

hotoke.cssを編集してください。ちなみに、最初の呼び出し文言は文字数によって、降臨後の文言は画像の幅によって吹き出しのサイズが変わりますがCSSで変更可能です。

hotoke.pngを差し替えてください。デモの画像はフリー素材を組み合わせただけなので、あなただけのほとけを降臨させてください。