ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン 目次

1. サイトにコナミコマンドを埋め込む「Cheat Code」
2. cubeがふわふわぷかぷかと現れてくる「cube.js」
3. クリックすると輪っかが広がる「pointer.js」
4. 要素をブルブルさせる「jRumble」
5. 削るとコンテンツが見えるスクラッチを実装できる「wScratchPad」
6. ページをめくるようなエフェクトを実装できる「jQuery Peelback」
7. 雪を降らせる「Jquery Snowfall Plugin」

1. サイトにコナミコマンドを埋め込む「Cheat Code」

サイトで「↑ ↑ ↓ ↓ ← → ← → B A」のようなコナミコマンドを入力するとメッセージを表示できるプラグイン。
文章だけじゃピンとこない場合は簡単ですがデモを作ったので確認してみて下さい。

使い方は「Cheat Code」よりjquery.cheat-code.jsをダウンロードし、jQueryと合わせて読み込みます。
例としてソースは以下のようになります。

HTML - head

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cheat-code.js"></script>
<script type="text/javascript">
	$(document).cheatCode({ 
		code : '38,37,40,39',
		message : 'Hello World!'
	});
</script>

※パスなどは環境に合わせて書き換えてください。

上記ソースはデモで使用したもので、キーボードで「↑ ← ↓ →」と入力すると「Hello World!」というメッセージが出るように設定したものです。
5行目でキーコードをカンマ区切りで指定し、6行目で表示したいメッセージを指定できます。
codeを指定していない場合はデフォルトである「上上下下左右左右BA」に設定されます。
（キーコードを記述する際、こちらのようなサイトを使用すれば簡単に調べられます。）
また、サンプルのように見栄えを少しだけ変更したいぐらいであれば、背景にoverlay、メッセージ部分にmodalというクラスをそれぞれ使用しているので、CSSで指定してあげれば変更できます。
クラス名を変更したい場合は、スクリプト内で指定されている部分があるので、そこを変更すれば任意のものにできます。

目次へ

2. cubeがふわふわぷかぷかと現れてくる「cube.js」

「nejimaki-box」のtahniさん作。
しばらくすると上記イメージのようなcubeがふわふわと現れるライセンスフリーのプラグイン。
ホワイトスペースが多いサイトなどで取り入れると特に良さそうです。
使い方も簡単でcube.jsとjQueryを読み込むだけで実装できますし、cubeはCSSで表現しているので、border-radiusとかで円形などにもできるそうです。
デモとファイルダウンロードは以下。

目次へ

3. クリックすると輪っかが広がる「pointer.js」

同じく「nejimaki-box」のtahniさん作。
クリックするとふわっと輪っかが広がるライセンスフリーのプラグイン。
シンプルですが、クリックできたのかわかりやすいし良いですね :)
デモとファイルダウンロードは以下。

また、以下のエントリーで輪っかの大きさや出るスピードなどのカスタマイズ方法を丁寧に紹介していますので、カスタマイズをしたい場合は参考になります。

目次へ

4. 要素をブルブルさせる「jRumble」

指定した要素をブルブルと震わることができるプラグイン。
使い方は「jRumble」よりjrumble.jsをダウンロードし、jQueryと合わせて読み込みます。
例としてソースは以下のようになります。

HTML - head

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jrumble.1.3.js"></script>
<script type="text/javascript">
	$(function(){
		$('#foo').jrumble({
			x: 3,
			y: 3
		});
	});
</script>

※パスなどは環境に合わせて書き換えてください。

※jrumble.jsは、記事投稿時の最新である1.3を使用しています。

上記ソースのように記述すると、#fooが指定された要素がブルブル震えるようになります。
オプションで距離、角度、スピード、透明度など調整することができ、トリガーもフバー、クリック、マウスダウン、タイマー、常時など沢山用意されています。
オプションやトリガーの詳細、デモ、ファイルダウンロードは以下。

目次へ

5. 削るとコンテンツが見えるスクラッチ機能を実装できる「wScratchPad」

スクラッチカードのように、削ると中身が見えるようなコンテンツを作成できるプラグイン。
文章じゃわかりにくいので以下デモです。

使い方はwScratchPad.jsとjQueryを合わせて読み込みます。
例としてソースは以下のようになります。

HTML - head

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/wScratchPad.js"></script>
<script type="text/javascript">
	$("#foo").wScratchPad({
		width: 210,
		height: 100,
		image: 'images/image.jpg'
		color: '#ff0000',
		cursor: 'images/cursor.png',
		size: 5
	});
</script>

※パスなどは環境に合わせて書き換えてください。

上記ソースのように記述すると、#fooが指定された要素にスクラッチカードのような機能を実装できます。
オプションでサイズ、表示される画像、マスクの色、削る際のサイズなどを指定でき、カーソルの画像もオプションで変更することができます。
例えば、コインの画像を使用してマスク色をシルバーとかにすれば、本当のスクラッチカードのようにすることもできますね。

また、どれぐらい削ったかを取得する機能もついており、70％以上削れたら何かを表示するだとか、50％削ったらマスクを解除するなんてこともできます。
使い方の詳細やファイルのダウンロードは以下。

目次へ

6. ページをめくるようなエフェクトを実装できる「jQuery Peelback」

右上にペロッとめくれるようなページのエフェクトを実装するプラグイン。
広告を表示したり、ソースを表示させてみたり、ちょっとした隠しコンテンツを忍ばせたりといろいろ使えそうです。
以下デモです。

使い方はjquery.peelback.jsとjQueryを合わせて読み込みます。
例としてソースは以下のようになります。

HTML - head

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.peelback.js"></script>
<script type="text/javascript">
	$(function(){
		$('body').peelback({
			adImage : 'ここに隠しておく画像を指定',
			peelImage : 'ここにめくれるページの画像を指定',
			clickURL : 'クリックした時のURL',
			autoAnimate : true //初期アニメーションの有無
		});
	});
</script>

※パスなどは環境に合わせて書き換えてください。

上記ソース以外にもオプションがあり、最小・最大それぞれのサイズ変更などもできます。
使い方の詳細やファイルのダウンロードは以下。

目次へ

7. 雪を降らせる「Jquery Snowfall Plugin」

冬になるといろんなブログで雪が降っているのを見かけますが、それを実装するプラグイン。
単純によく見かける白丸の雪を降らすのは勿論、要素を画像に変更したり、指定した箇所に積もっていく表現などもできます。
以下デモです。

使い方はsnowfall.jquery.js（又はsnowfall.min.jquery.js）とjQueryを合わせて読み込みます。
例としてソースは以下のようになります。

HTML - head

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/snowfall.jquery.js"></script>
<script type="text/javascript">
	$(document).snowfall({
		flakeCount : 100,  //要素の数
		minSize : 5,       //最大の大きさ
		maxSize : 10,      //最小の大きさ
		round : true       //丸みを持たせる
	});
</script>

※パスなどは環境に合わせて書き換えてください。

上記ソースは一般的な丸みを持った雪が降るエフェクトの設置方法で、色を変えたい場合はflakeColor、スピードを調整したい場合はminSpeedやmaxSpeedなど、他にも幾つかのオプションが用意されています。

また、例えば雪の結晶などのように画像を使用したい場合はimageで指定することができます。
このimageを利用すれば、春には桜の花びらが舞い、秋にはもみじが落ちてくるといったようなこともできます :)
使い方の詳細やファイルのダウンロードは以下。

目次へ