CRAZY Code ─ ページ破壊ジョーク｜コピペで使える動きのサンプル

S-001大地震CRAZY度 ★★★★★

押すとこのページ全体が地震に遭います。震源のボタンに近い所から小刻みなP波、続いて大きなS波が届き、壁にひびが走って天井から粉が落ちます。

Web Animationscomposite: addCanvas 2DWeb AudioVibration

これは何？

ページの見えている部分をヘッダー、見出し、カードなどの塊に分け、塊ごとに揺らして地震を起こします。震源のボタンから遠い塊ほど遅れて揺れ始め、小さな塊ほど大きく揺れます。画面の右上には地震計が出て、4.6秒ほどで収まります。

使い方

「全部コピー」して、ページのHTMLに貼り付けます。
揺らしたくない要素（動画や地図など）には data-ug-still を付けます。その要素の中身も揺れなくなります。
音を鳴らすときは、.ug-temblor に data-sound を付けます。

カスタマイズ

揺れの長さは T（4.6秒）、S波の大きさは ground() の 20（px）です。
揺れが伝わる速さは / 1600（1秒に1600px）、ひびの本数は makeCracks() の 4 です。

注意

body には transform をかけず、塊ごとに Web Animations の composite: 'add' で揺れを足しています。元の transform や他のアニメーションを壊さず、終わると跡形もなく戻ります。Esc キーかクリックでいつでも止まります。揺れている間だけ、はみ出しで横スクロールが出ないよう html と body の overflow-x を切り替え、スマホで固定表示がずれないよう viewport に minimum-scale=1 を足します。終われば元に戻します。動きを減らす設定では揺らさず、地震計だけを出します。

S-002天地無用CRAZY度 ★★★★

押すとページ全体が画面の中心を軸に半回転し、逆さまのまま「天地無用」の札が貼られます。逆さまの間にもう一度押すと、回しすぎて目を回します。

Web Animationstransformcomposite: addWeb Audio

これは何？

body の直下にある塊（ヘッダー、本文、フッター）を、それぞれ画面の中心までの距離を挟んで回します。全部が同じ点を軸に回るので、ページ全体が1枚の板のようにひっくり返ります。2.4秒逆さまのまま止まり、さらに半回転して元に戻ります。

使い方

「全部コピー」して貼り付けます。
逆さまの間に箱をもう一度押すと、2回転、3回転と回しすぎます（3回まで）。
回したくない要素には data-ug-still を付けます。音を鳴らすときは .ug-upend に data-sound を付けます。

カスタマイズ

逆さまで止まる時間は HOLD（2400ミリ秒）です。
回り方は plan() の数値で、縮み具合は .8、行き過ぎる角度は 16 です。札の文言は run() の中にあります。

注意

逆さまの間に箱以外をクリックするか Esc キーを押すと、すぐ元に戻ります。動きを減らす設定では回さず、薄く消えてから逆さまで現れる切り替えにします。

S-003レントゲン透視PC推奨CRAZY度 ★★★

押すと部屋が暗くなり、カーソルの位置にレンズが出ます。レンズの中ではページが白黒反転し、要素の箱とタグ名が骨のように透けて見えます。

backdrop-filterCSS maskCanvas 2DPointer Events

これは何？

レンズの中だけ backdrop-filter でページの色を反転させ、その上にレンズに入った全要素の枠とタグ名（div.spec など）を描きます。深い入れ子ほど白く光ります。8秒たつと自動で終わります。

使い方

「全部コピー」して貼り付けます。
マウスを動かすとレンズが付いてきます。スマホでは指でなぞると付いてきて、触らずにいるとレンズが勝手に見回ります。
クリックかタップ、Esc キーでいつでも終わります。

カスタマイズ

透視する時間は DUR（8000ミリ秒）、レンズの大きさは rad（105〜170px）です。
色の変え方は .ug-roentgen-lens の backdrop-filter です。

注意

毎コマ、ページの全要素の位置を読み取ります。要素が数千あるページでは重くなることがあります。backdrop-filter が使えないブラウザではレンズの中が反転せず、枠だけが見えます。

S-004ページ強制終了CRAZY度 ★★★★

押すとページがくすんでカクつき、偽のエラー画面に変わります。点検の記録には実際の要素の数や押したボタンが並び、画面がしぼむとページが上から組み直されます。

Web Animationsstep-endbackdrop-filterWeb Audio

これは何？

ページが止まったふりをする演出です。灰色にくすんでカクついたあと、紺色の画面に点検の記録を流し、ブラウン管のようにしぼんで閉じます。最後にページの塊が上から順に現れて元どおりになります。全部で5秒ほどです。

使い方

「全部コピー」して貼り付けます。
記録には、要素の数、押されたボタン、画面の大きさなど、その場の本当の値が入ります。
音を鳴らすときは、.ug-halt に data-sound を付けます。

カスタマイズ

見出しと記録の文言は crash() の中にあります。
点検の長さは step() の 2600 ミリ秒です。37%で一度止まるのもここで決めています。画面の色は .ug-halt-scr の background です。

注意

本物の故障と取り違えられないよう、実在のOSや会社のエラー画面・ロゴ・文言には似せていません。改造するときも似せないでください。利用者を不安にさせるうえ、権利の問題にもなります。

S-005ドミノ倒しCRAZY度 ★★★★

押すと、画面に見えているヘッダーやカードが上から順に奥へ倒れ、着地のたびにカチッと鳴って砂ぼこりが上がります。全部倒れると、逆の順に起き上がります。

Web Animations3D transformcomposite: addCanvas 2DWeb Audio

これは何？

舞台の小さなドミノが倒れたあと、画面に見えている塊を読む順（上から、左から）に並べ、下の辺を軸に奥へ倒していきます。倒れる間隔は少しずつ縮み、最後は畳みかけるように倒れます。

使い方

「全部コピー」して貼り付けます。
倒したくない要素には data-ug-still を付けます。
音を鳴らすときは、.ug-topple に data-sound を付けます。

カスタマイズ

1枚が倒れきるまでの時間は F（560ミリ秒）、次が倒れるまでの間隔は 150 - i * 10（最短55ミリ秒）です。
全部倒れてから起き上がるまでの待ちは 900 ミリ秒です。

注意

塊の分け方は pieces() で決まります。背景も枠もない入れ物（グリッドの外枠など）が画面の高さの6割より高いときは、中の子要素に分けて倒します。カードのように背景のある要素は、そのまま1枚として倒します。動きを減らす設定では倒さず、順に薄くしてから戻します。

S-006排水口CRAZY度 ★★★★★

栓を抜くと排水口に渦ができ、ページの塊が回りながら小さくなって吸い込まれます。空っぽになったあと、最後に流れたものから順に噴き出して元に戻ります。

Web Animationscomposite: addCanvas 2DWeb Audio

これは何？

栓の位置に渦を作り、画面に見えている塊を螺旋に沿って吸い込みます。近い塊ほど先に流れ、遠い塊は大回りして遅れて吸い込まれます。0.5秒ほど空っぽのまま止まったあと、逆の順に噴き出して戻ります。

使い方

「全部コピー」して貼り付けます。
渦の中心は栓（.ug-plughole-plug）の位置です。栓を別の場所に置けば、そこへ流れます。
流したくない要素には data-ug-still を付けます。音を鳴らすときは .ug-plughole に data-sound を付けます。

カスタマイズ

回る量は at() の 8.8（ラジアン。約1.4周）、吸い込まれる時間は 1250 + q * 450 ミリ秒です。
空っぽで止まる時間は 550、渦の腕の数は frame() の 7 です。

注意

塊を縮めて透明にしているだけで、要素は消していません。流れている間に Esc キーかクリックで、すぐ元の場所に戻ります。動きを減らす設定では回さず、薄くしてから戻します。