CRAZY Code ─ 過剰ホバー｜コピペで使える動きのサンプル

S-001ホログラムカードCRAZY度 ★★★★

カーソルの位置に合わせてカードが傾き、虹色の箔と光沢が光の当たる場所へ流れます。影は反対側へ逃げます。押すと裏返ります。

3D transform@propertymix-blend-modePointer Events

これは何？

トレーディングカードの「キラ」を再現したカードです。カーソル（スマホでは指）の位置でカードが傾き、虹色の箔・きらめき・光沢がその位置に集まります。箔の角度は @property で登録した角度をアニメーションさせているので、カーソルを止めていても少しずつ流れます。

使い方

「全部コピー」して貼り付けます。
.ug-holo-card を増やせば何枚でも並べられます。箔の種類は data-foil の prism（虹）・galaxy（星）・gold（金）の3つです。
スマホでは、カードを押さえたまま指を動かすと傾きます。軽くたたくと裏返ります。
音を鳴らすときは、.ug-holo に data-sound を付けます（裏返すときに鳴ります）。

カスタマイズ

傾きの最大は TILT（16度）、戻るときのばねの硬さは step() の 190 と 17 です。
虹の色は .ug-holo-foil の background-image、流れる速さは ug-holo-flow の 7s です。
カードの文字と絵（.ug-holo-art）は自由に差し替えられます。

注意

箔は color-dodge と overlay で重ねているので、カードの地を明るい色にすると白く飛びます。地は暗めにしてください。@property に対応していない古いブラウザでは、箔がひとりでに流れる動きだけが止まります（傾きと光沢は動きます）。

S-002ガムボタンCRAZY度 ★★★★★

カーソルを近づけるとボタンの縁が吸い寄せられて伸びます。押したまま引っぱると糸を引いて細くなり、限界でぷちっとちぎれて戻ります。

Canvas 2DばねPointer EventsWeb Audio

これは何？

ボタンの形をキャンバスに描き、カーソルの方へ伸びる「先端」と、本体とをつなぐ糸を毎フレーム作り直しています。引っぱるほど糸の中ほどが細くなり、決めた長さを超えるとちぎれて、本体がぷるんと揺れます。ちぎれた先は指に付いたまま落ちていきます。

使い方

「全部コピー」して貼り付けます。
上に本物の <button> が重なっているので、押してすぐ離すとふつうのボタンとして click が届きます。キーボードでも押せます。
スマホでは、ボタンを押さえたまま指を動かすと伸びます。ボタンの近くを押さえると、そちらへ吸い寄せられます。
音を鳴らすときは、.ug-gum に data-sound を付けます。

カスタマイズ

ガムの色は GUM（上と下の2色）、吸い寄せられる距離は REACH（150px）です。
ちぎれる長さは size() の LMAX（最大240px）です。

注意

引っぱってから離したときは、クリックとして扱いません。送信ボタンに使っても、伸ばして遊んだだけで送信されることはありません。

S-003本音レンズCRAZY度 ★★★★

虫眼鏡を当てたところだけ、宣伝文句が本音に書き換わって拡大されます。スマホは押さえた位置へレンズが移り、レンズをつまんで動かせます。

transformoverflow clipPointer Eventsキーボード操作

これは何？

同じ並びのカードを2枚用意し、2枚目の「本音版」を丸いレンズの中だけに1.7倍で映しています。表の「いつでも解約OK」の上にレンズを当てると、同じ場所に「解約は電話のみ（平日10〜11時）」が出ます。レンズは少し遅れて追いかけ、柄は動きにつられて揺れます。

使い方

「全部コピー」して貼り付けます。
表の文章は1枚目の .ug-honne-card、本音は .ug-honne-true の中を書き換えます。2枚を同じ並びにしておくと、レンズの中で位置がそろいます。
スマホでは、押さえた位置の左上にレンズが移ります（柄の先が指に来ます）。レンズそのものを押さえると、つまんで動かせます。
キーボードでは、枠を選んで矢印キーで動かします（Shift で大きく動きます）。

カスタマイズ

倍率は ZOOM（1.7）、追いつく速さは FOLLOW、レンズの大きさは CSS の --ug-honne-d（150px）です。

注意

本音版は読み上げソフトには読ませません（aria-hidden）。実在の商品の説明に使うと誤解を招くので、ネタや企画ページの演出として使ってください。

S-004ネオン管の看板CRAZY度 ★★★

文字をなぞると、ネオン管が1本ずつジジッとちらついてから点灯し、壁と床に光が回り込みます。離れると、オレンジの余熱を残して消えます。

text-shadowWeb Animationsbox-reflectWeb Audio

これは何？

1文字を1本のネオン管として扱う看板です。触れた文字は、点灯管が温まるまでの「ちらつき」を2〜3回はさんでから点き、2.6秒たつと消えます。点いている間はときどき小さく揺らぎ、消えるときは管が冷める色を一瞬残します。

使い方

「全部コピー」して貼り付けます。
文字は .ug-sign-ch に1文字ずつ入れます。ピンクの段は .ug-sign-pink、水色の段は .ug-sign-blue です。
スマホでは、文字を指で横になぞるか押さえると点きます。「全部つける」で全部を順に点けたままにできます。
音を鳴らすときは、.ug-sign に data-sound を付けます。ブラウザの決まりで、ホバーだけでは音を出せないため、看板かボタンを一度押したあとから鳴ります。

カスタマイズ

消え始めるまでの時間は HOLD（2600ミリ秒）、ちらつきの回数は ignite() の n です。
管の色は .ug-sign-pink b と .ug-sign-blue b の text-shadow です。

注意

ちらつきは1文字ずつ・0.5秒以内・暗めの光にとどめていて、画面全体が光る点滅はしません。動きを減らす設定の環境では、ちらつかずにすっと点きます。床の映り込みは -webkit-box-reflect を使っていて、Firefox では表示されません（看板そのものは動きます）。

S-005増殖する分身ボタンCRAZY度 ★★★★★

触れるたびにボタンが分裂して、分身が増えていきます。本物を押すと分身が全部吸い込まれ、偽物を押すと消えます。ときどき全員の場所が入れ替わります。

Web AnimationsCSS translatePointer EventsWeb Audio

これは何？

カーソルが乗るたびに、そのボタンが2つに分かれます。分身に乗ると、そこからさらに分かれます。5回分裂するごとに全員の位置がシャッフルされるので、本物を見失わずに押せるかどうかの遊びになります。

使い方

「全部コピー」して貼り付けます。
本物は .ug-mitosis-real の <button> です。本物を押したときの処理は、judge() の「本物」のところに書き足します。
スマホでは、ボタンを0.3秒押さえるか、ボタンの上を指で横になぞると分裂します。軽くたたくと「押した」扱いになります。
音を鳴らすときは、.ug-mitosis に data-sound を付けます。

カスタマイズ

分身の上限は MAX（16体）、シャッフルの間隔は SHUFFLE（5回ごと）です。
分身が増えるほどボタンが小さくなります。縮み方は scale() の .028 と下限 .6 です。

注意

分身は読み上げソフトとキーボードからは見えず、Tabキーで移れるのは本物だけです（本物を選んだときも1回分裂します）。押せないと困る大事なボタンには使わず、遊びの場面で使ってください。

S-006ピンアートの壁CRAZY度 ★★★★

数千本のピンが並ぶ壁です。なぞったところのピンが手前へせり出して跡が残り、数秒かけて沈みます。押すと星やハートの形が浮き上がります。

Canvas 2DばねPointer EventsWeb Audio

これは何？

裏から手を押し当てると形が浮かぶピンアート（ピンスクリーン）を、キャンバスで描いています。ピン1本ずつにばねの付いた高さがあり、カーソルの周りが手前へ押し出され、離れて1.2秒たつと沈み始めます。浮いたピンほど明るく、影も長くなります。

使い方

「全部コピー」して貼り付け、.ug-pinart の大きさを決めます。ピンの本数は大きさに合わせて決まります。
押す（たたく）たびに、星→ハート→顔→CRAZY の順に形が浮き上がります。
スマホでは、指で横になぞるか、押さえ続けると浮き上がります。
キーボードでは、枠を選んで矢印キーで動かし、Enter で形を押し出します。
音を鳴らすときは、.ug-pinart に data-sound を付けます。

カスタマイズ

ピンの間隔は GAP（14px）、筆の大きさは BRUSH、浮いたまま止まる秒数は HOLD、沈む速さは SINK です。
浮き上がる形は SHAPES です。star heart smile 以外の文字列は、その文字がそのまま浮きます。

注意

縦方向のなぞりはページのスクロールに使われます（touch-action: pan-y）。ピンが多いほど重くなるので、大きく置くときは GAP を広げてください。