ちょっとした仕掛けや面白い表現を実装できる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で指定することができ、春には桜の花びらが舞い、秋にはもみじが落ちてくるといったようなこともできます :)
使い方の詳細やファイルのダウンロードは以下。