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

  • Posted on
  • Category : Tips
ちょっとした仕掛けや面白い表現を実装できるjQueryプラグイン

サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインを幾つか紹介します。案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :)

※以下で紹介しているものは全てjQueryを使用しますので、予めjQueryを読み込ませて下さい。

ちょっとした仕掛けや面白い表現を実装できる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」

サイトにコナミコマンドを埋め込む「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」

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

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

目次へ

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

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

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

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

目次へ

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

要素をブルブルさせる「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」

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

使い方は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」

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

使い方は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」

雪を降らせる「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、スピードを調整したい場合はminSpeedmaxSpeedなど、他にも幾つかのオプションが用意されています。

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

目次へ

以上、ちょっとした仕掛けや面白い表現を実装できるjQueryプラグインの紹介でした。
今回は個人的に汎用性が高そうだなと思うものに絞っていますが、こういったプラグインはまだまだ他にも沢山あるので、興味がある方はいろいろ調べてみると面白いものが見つかるかと思います。
また、もしここで紹介している以外で「これオススメ!」っていうのがあればコメントなどを通じて教えてください :)

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。