CRAZY Code ─ 爆発・クリック演出｜コピペで使える動きのサンプル

S-001爆散ボタンCRAZY度 ★★★★★

押すと0.07秒だけ時間が止まり、火花・残り火・破片・煙が画面の外まで飛び散ります。破片は画面の下で跳ねます。

Canvas 2DヒットストップWeb AudioVibration

これは何？

押した瞬間にほんの一瞬（0.07秒）だけ動きを止めてから、火花・残り火・破片・煙を画面全体へ飛ばすボタンです。ゲームでいう「ヒットストップ」で、一瞬止めることで当たりの重さが出ます。

使い方

「全部コピー」して、ページのHTMLに1回貼り付けます。
class="ug-blast" のボタンは、いくつ置いても動きます。
音を鳴らすときは、ボタンに data-sound を付けます。

カスタマイズ

粒の量は burst() の 170、止める長さは freeze = .07 です。
一緒に揺らしたい親要素に data-ug-shake を付けると、そこが揺れます。付けなければボタンだけが揺れます。

注意

画面全体を覆う透明なキャンバスを1枚追加します（クリックは下へ素通りします）。送信完了や達成など「ご褒美」の場面に置くと効きます。何でもないボタンで毎回爆発させると、すぐ疲れます。

S-002溜め爆発ボタンCRAZY度 ★★★★★

長押しで力を溜めるほど、震えと吸い込みと音程が上がり、離した瞬間に溜めた分だけ爆発します。

Pointer EventsCanvas 2DWeb Audio

これは何？

長押しで力を溜め、離した瞬間に溜めた量に応じた大きさで爆発するボタンです。溜めるほど震えと光の吸い込みが強まり、満タンで離すと二段で爆発します。

使い方

「全部コピー」して貼り付けます。
キーボードでは、スペースかEnterの長押しで溜められます。
指やマウスがボタンの外で離れても、溜めっぱなしにはなりません。

カスタマイズ

満タンまでの時間は CHARGE_MS（1600ミリ秒）です。
表示する文言は tick() と release() の中にあります。

注意

スマホで長押しメニューが出ないよう、ボタンの上では文字の選択と長押しメニューを止めています。

S-003粉砕カードCRAZY度 ★★★★

叩いた場所からひびが走り、カードが三角の破片になって立体的に飛び散ったあと、巻き戻って元に戻ります。

clip-pathWeb Animations3D transform

これは何？

叩いた場所からひびが走り、カードが40枚の三角の破片に割れて飛び散ります。1.5秒後に巻き戻って元に戻ります。

使い方

「全部コピー」して貼り付けます。
.ug-shatter の中身（画像や文章）は自由に差し替えられます。破片はカードの複製を三角に切り抜いて作るので、中身がそのまま割れます。

カスタマイズ

破片の細かさは triangles() の cols と rows（5×4）です。
巻き戻すまでの時間は 1500、巻き戻しの速さは playbackRate = -1.6 です。

注意

割れるたびにカードを40枚複製します。フォームや動画、iframe を入れたカードには向きません。見た目だけのカードに使ってください。

S-004衝撃波レンズCRAZY度 ★★★★

クリックした場所から衝撃波が広がり、画面が歪んで色がずれます。押したままなぞると連続で出ます。

WebGLシェーダーPointer Events

これは何？

WebGL（GPU）を使い、クリックした点から衝撃波を広げて画面を歪ませ、赤・緑・青をずらすレンズです。波は8つまで重なります。

使い方

「全部コピー」して貼り付け、.ug-lens の大きさを決めます。
歪ませる絵は paint() の中でキャンバスに描いています。

カスタマイズ

画像を歪ませるなら、paint() で drawImage を使います。
波の速さはシェーダーの r.z*1.1、輪の太さは *9.、歪みの強さは .06 です。

注意

歪むのはキャンバスに描いた絵だけで、HTMLの文章そのものは歪みません。WebGLが使えない環境では静止画になります。スマホでは、縦になぞるとページのスクロールになるので、連続で出したいときは横になぞります。

S-005連鎖爆発グリッドCRAZY度 ★★★★★

1マス押すと、隣へ隣へと誘爆します。赤いマスは広く誘爆します。収まると盤が元に戻ります。

Canvas 2DWeb AnimationsWeb Audio

これは何？

盤の1マスを押すと、隣のマスへ確率で誘爆していきます。赤いマスは広い範囲に誘爆します。連鎖の数が大きく出て、収まると盤が作り直されます。

使い方

「全部コピー」して貼り付けます。
盤の大きさは data-cols と data-rows で決めます。

カスタマイズ

誘爆する確率は .42（赤いマスは .95）、赤いマスの割合は .12 です。
誘爆の間隔は R(70, 140) ミリ秒です。

注意

マスが多いほど処理が増えます。100マス程度までを目安にしてください。

S-006お祝いクラッカーCRAZY度 ★★★

押すと画面の左下と右下からクラッカーが鳴り、紙吹雪が表裏を返しながらひらひら舞い落ちます。

Canvas 2DWeb AudioVibration

これは何？

押すと画面の左下と右下からクラッカーを撃ち、紙吹雪を画面全体に降らせる送信ボタンです。紙片は風に揺れ、表裏を返しながらゆっくり落ちます。

使い方

「全部コピー」して貼り付けます。
送信が終わったところで出したいときは、ボタンを押したときではなく、完了したところで window.ugConfetti() を呼びます（音を鳴らすなら ugConfetti(true)）。

カスタマイズ

色は COLORS、量は cannon() の 140（左右それぞれ）です。
落ちる速さの上限は 170 です。小さくするほど長く舞います。

注意

紙吹雪は4秒ほどで消えます。何度押しても重なって撃てますが、連打すると紙が増えすぎるので、完了時に1回だけ出すのがおすすめです。