[JS]エイプリルフール用のネタをあなたのブログに仕込むスクリプト -Fool.js
Post on:2013年3月31日
sponsors
ウェブページを逆さまにしたり、傾けたり、クリック禁止にしたりなど、ちょっとしたイタズラをブログなどに仕込むjQueryのプラグインを紹介します。
Fool.jsのデモ
デモを試す時はブラウザのリロードができる状態にしておいてください！
Fool.jsの「Pranks」にイタズラの一覧があります
Pranksの各アイテムをクリックすると、次のイタズラを実行します。
- fallingScrollbar
- スクロールバーの消失
- rick
- リック・アストリーの動画をスクリーン外で再生
- hiddenVideos
- 意味不明な動画を再生
- vanishingElements
- 任意の要素を消失
- questionTime
- 米のアニメスポンジ・ボブのテーマソングを歌う
- upsideDown
- ページ表示を逆さまに
- h4xx0r
- ページを編集可能に
- wonky
- ページを傾ける
- flash
- ページをチカチカ表示
- crashAndBurn
- エンドレスなループを実行
※ブラウザクラッシュっぽいけど、実行しないようです。 - shutter
- ページをシャッターで閉じる
- unclickable
- クリック禁止に
Fool.jsの使い方
イタズラには不愉快な印象を与えるものもあるので、よく検討してご利用ください。
Step 1: 外部ファイル
「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
<link rel="stylesheet" href="assets/fool.css"> <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="fool.min.js"></script> <script src="assets/site.js"></script>
Step 2: ネタを指定
エイプリルフール用に仕込みたいネタを指定します。
$(document).ready(function() {
$.fool('rick'); // リック・アストリーを実行
});
「$.fool」を使うことで、多数のネタを仕込むこともできます。
$.fool({
hiddenVideos: true, // 動画の再生
vanishingElements: true, // 任意の要素を隠す
});
ネタ一覧
ネタはリック・アストリー以外にもたくさんあります。
fallingScrollbar: true, // スクロールバーの消失
rick: true, // リック・アストリーの動画をスクリーン外で再生
hiddenVideos: true, // 意味不明な動画を再生
vanishingElements: true, // 任意の要素を消失
questionTime: true, // 米のアニメ<a href="http://www.nickjapan.com/character/spongebob/">スポンジ・ボブ</a>のテーマソングを歌う
upsideDown: true, // ページ表示を逆さまに
h4xx0r: true, // ページを編集可能に
wonky: true, // ページを傾ける
flash: true, // ページをチカチカ表示
crashAndBurn: true, // エンドレスなループを実行（※ブラウザクラッシュっぽいけど、実行しないようです）
// これは実装しない方がよいでしょう
shutter: true, // ページをシャッターで閉じる
unclickable: true, // クリック禁止に
sponsors
