ご存知の方は知っている某ドラマで現れる、「ほとけ」風ななにかを自分のサイト内に呼び寄せるjQueryプラグインを作成しました。
デモ
実装サンプルはこちらになります。ページを開いてから数秒後に登場します。
hotoke.jsのサンプルページ
使い方
以下のファイルを表示させたいページに読み込みます。
- hotoke.css
- jQuery（今回はバージョン2.2.4を使用して作成しました。他のバージョンで動くかは未検証です。）
- 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つあり、
- timeStart ほとけ呼びかけるまでの時間を指定（ミリ秒）
- hotokeImgPath ほとけの画像へのパス（読み込むHTMLからのパス）
<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を差し替えてください。デモの画像はフリー素材を組み合わせただけなので、あなただけのほとけを降臨させてください。