サイトにちょっとした仕掛けをつけたり、使い方によっては面白い表現を与えてくれるjQueryプラグインをいくつか紹介します。
案件とかだと難しいですけど、例えば個人ブログのように自分でサイトを運営しているなら、こういった遊び心を取り入れても面白いですね :)
サイトにコナミコマンドを埋め込む「Cheat Code」
サイトで↑↑↓↓←→←→BAのようなコナミコマンドを入力するとメッセージを表示できるプラグイン。
使い方は「Cheat Code」よりjquery.cheat-code.js
をダウンロードし、jQueryと合わせて読み込みます。
例としてコードは下記のようになります。
<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
というclassをそれぞれ使用しているので、CSSで指定してあげれば見栄えを変更できます。
class名を変更したい場合は、スクリプト内で指定されている部分があるので、そこを変更すれば任意のものにできます。
cubeがふわふわぷかぷかと現れてくる「cube.js」
しばらくすると上記イメージのようなcubeがふわふわと現れるライセンスフリーのプラグイン。
ホワイトスペースが多いサイトなどで取り入れると特に良さそうです。
使い方も簡単でcube.js
とjQueryを読み込むだけで実装できますし、cubeはCSSで表現しているので、border-radius
とかで円形などにもできるそうです。
デモとファイルダウンロードは以下。
クリックすると輪っかが広がる「pointer.js」
クリックするとふわっと輪っかが広がるライセンスフリーのプラグイン。
シンプルですが、クリックできたのかわかりやすいし良いですね :)
デモとファイルダウンロードは以下。
また、以下のエントリーで輪っかの大きさや出るスピードなどのカスタマイズ方法を丁寧に紹介していますので、カスタマイズをしたい場合は参考になります。
要素をブルブルさせる「jRumble」
指定した要素をブルブルと震わることができるプラグイン。
使い方は「jRumble」よりjrumble.js
をダウンロードし、jQueryと合わせて読み込みます。
例としてコードは下記のようになります。
<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>
上記のように記述すると、#foo
が指定された要素がブルブル震えるようになります。
オプションで距離、角度、スピード、透明度など調整することができ、トリガーもホバー、クリック、マウスダウン、タイマー、常時など沢山用意されています。
オプションやトリガーの詳細、デモ、ファイルダウンロードは以下。
削るとコンテンツが見えるスクラッチ機能を実装できる「wScratchPad」
スクラッチカードのように、削ると中身が見えるようなコンテンツを作成できるプラグイン。
使い方はwScratchPad.js
とjQueryを合わせて読み込みます。
例としてコードは下記のようになります。
<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%削ったらマスクを解除するなんてこともできます。
使い方の詳細やファイルのダウンロードは以下。
ページをめくるようなエフェクトを実装できる「jQuery Peelback」
右上にペロッとめくれるようなページのエフェクトを実装するプラグイン。
広告を表示したり、ソースを表示させてみたり、ちょっとした隠しコンテンツを忍ばせたりといろいろ使えそうです。
使い方はjquery.peelback.js
とjQueryを合わせて読み込みます。
例としてソースは以下のようになります。
<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>
上記サンプルコード以外にもオプションがあり、最小・最大それぞれのサイズ変更などもできます。
使い方の詳細やファイルのダウンロードは以下。
雪を降らせる「Jquery Snowfall Plugin」
冬になるといろんなブログで雪が降っているのを見かけますが、それを実装するプラグイン。
単純によく見かける白丸の雪を降らすのは勿論、要素を画像に変更したり、指定した箇所に積もっていく表現などもできます。
使い方はsnowfall.jquery.js
(またはsnowfall.min.jquery.js
)とjQueryを合わせて読み込みます。
例としてコードは下記のようになります。
<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
で指定することができ、春には桜の花びらが舞い、秋にはもみじが落ちてくるといったようなこともできます :)
使い方の詳細やファイルのダウンロードは以下。
以上、ちょっとした仕掛けや面白い表現を実装できるjQueryプラグインの紹介でした。
今回は個人的に汎用性が高そうだなと思うものに絞っていますが、こういったプラグインはまだまだ他にも沢山あるので、興味がある方はいろいろ調べてみると面白いものが見つかるかと思います。