[JS]エイプリルフール用のネタをあなたのブログに仕込むスクリプト -Fool.js

ウェブページを逆さまにしたり、傾けたり、クリック禁止にしたりなど、ちょっとしたイタズラをブログなどに仕込むjQueryのプラグインを紹介します。

サイトのキャプチャ

Fool.js
Fool.js -GitHub

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,        //  クリック禁止に

top of page

©2017 coliss