CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.07
CRAZY度 ★★★★ ─ スクロール酔い注意

スクロール暴走演出

スクロールに反応しすぎる箱を集めました。奥へ突き進む、速すぎると捕まる、糸を引いて千切れる、手を離すと勝手に走り出す。どれも舞台の中の箱だけが暴れるので、ページ自体のスクロールはそのまま使えます。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001ワープトンネルCRAZY度 ★★★★★
スクロールした分だけ曲がりくねったトンネルの奥へ進みます。勢いよく回すほど光の筋が伸び、視野が広がり、色がずれます。
Canvas 2DCSS 3D transformスクロール速度Web Audio

これは何？

箱の中のスクロール位置を「トンネルの奥行き」に置き換えて描く演出です。スクロールの速さも測っていて、速いほど光の筋が長く伸び、視野が広がり、赤と青に色がずれます。途中の標識はふつうのHTMLで、CSSの3D変形でトンネルと同じ遠近感で近づいてきます。

使い方

  1. 「全部コピー」して貼り付け、.ug-warp の高さ（min-height）を決めます。
  2. 標識は .ug-warp-sign です。data-z が置く奥行きで、中身は自由に書き換えられます。
  3. 箱をクリックしてから矢印キーやスペースでも進めます。音を鳴らすときは .ug-warp に data-sound を付けます。

カスタマイズ

  • トンネルの長さは DEPTH、スクロールの長さは .ug-warp-len の height です。
  • 曲がり具合は bx() と by()、輪の色は strokeRings() の hsl(...) です。

注意

速く回したときの視野の広がりは酔いやすい演出です。視差効果を減らす設定（prefers-reduced-motion）の環境では、トンネルは止めて標識の入れ替わりだけにしています。スマホでは、最初に一度箱をタップすると音が出るようになります。

S-002速度違反の利用規約CRAZY度 ★★★★
速く読み飛ばすほど文字が縦にぶれて色がずれ、制限速度を超えるとサイレンが鳴って違反切符が届きます。
SVGフィルタースクロール速度Web Audio

これは何？

スクロールの速さ（1秒あたりのピクセル数）をメーターに出す利用規約です。速くなるほど、SVGフィルターで文字が縦方向にだけぼけ、赤と青に分かれます。制限速度を0.2秒超え続けるか、制限の1.5倍を超えた時点でスクロールが止まり、サイレンと違反切符が出ます。「反省して戻る」を押すと、違反する前の位置まで巻き戻ります。

使い方

  1. 「全部コピー」して貼り付け、.ug-radar-sc の中身を読ませたい文章に差し替えます。
  2. 切符の「違反の場所」には、画面の上半分にある最後の <b> の見出しが入ります。
  3. 切符は Esc キーでも閉じられます。音を鳴らすときは .ug-radar に data-sound を付けます。

カスタマイズ

  • 制限速度は LIMIT（2500）、メーターの上限は MAXV、超え続けたら違反とみなす時間は HOLD（0.2秒）です。
  • ぶれの強さは paint() の 9（ぼかし）と 7（色のずれ）です。

注意

本当の規約や同意画面に使うと、読む人を困らせます。ジョークや、読み飛ばされがちな注意書きの演出として使ってください。スマホでは、最初に一度箱をタップすると音が出るようになります。

S-003糸を引いて千切れる一覧CRAZY度 ★★★★
指やカーソルのある行が先に動き、遠い行ほど置いていかれます。間に餅のような糸が伸び、強く弾くとぷつんと千切れます。
Canvas 2Dばねの計算スクロール量

これは何？

スクロールすると、つかんでいる場所（指やカーソルの位置）から遠い行ほど遅れてついてくる一覧です。行と行の隙間が開くと、その間に糸が伸びて細くなり、伸びきるとぷつんと千切れます。千切れた行はばねで元の位置へ戻り、隙間が閉じるとまたくっつきます。

使い方

  1. 「全部コピー」して貼り付け、<li> の中身を差し替えます。行の数は自由です。
  2. 糸の色は、1行目の背景色を読み取って使います。

カスタマイズ

  • 置いていかれる強さは LAG、千切れるまでの隙間は SNAP（px）です。
  • ばねの強さは K、揺れの収まりやすさは C です。C を小さくするとよく揺れます。

注意

行を transform で動かしているだけなので、リンクやボタンを入れてもそのまま押せます。ただし動いている間は押しにくいので、一覧の見た目を楽しませる場所に向いています。

S-004折りたたまれるページCRAZY度 ★★★
下から入ってくる面は折り目から開き、上へ抜ける面は奥へ倒れて折りたたまれます。動きはCSSだけで作っています。
scroll-driven animationsview()3D transform

これは何？

CSSの scroll-driven animations（view-timeline と animation-range）で、面が箱に入ってくる間と出ていく間だけアニメーションを進めます。入るときは折り目から手前へ開き、出るときは奥へ倒れながら暗くなります。偶数番目の面は左の辺から開きます。

使い方

  1. 「全部コピー」して貼り付けます。.ug-crease-pg を増やせば面が増えます。
  2. 面の色は style="--bg:…;--fg:…" で変えられます。
  3. scroll-driven animations に対応していないブラウザでは、同じ動きをスクロールのたびにJSで計算して付けます。

カスタマイズ

  • 倒れる角度は @keyframes の 100deg、遠近の強さは perspective(700px) です。
  • 開き始めと閉じ終わりの位置は animation-range（entry / exit）で調整します。

注意

面の高さが箱より高いと、開ききる前に倒れ始めます。面は箱の高さの半分くらいまでにしてください。視差効果を減らす設定の環境では、回転をやめて明るさの変化だけにしています。

S-005終わらないズームCRAZY度 ★★★★★
スクロールすると絵の真ん中の穴へ吸い込まれ、月、扉の鍵穴、テレビ、瞳、銀河と、絵の中の絵へどこまでも潜っていきます。
Canvas 2D無限ズームclip

これは何？

7枚の絵が、それぞれ真ん中の穴の中に次の絵を抱えています。スクロールで穴へ近づき、穴が画面を覆った瞬間に次の絵へ切り替えるので、継ぎ目なくどこまでも潜れます。1層ごとに少しずつひねるので、渦に吸い込まれるように見えます。

使い方

  1. 「全部コピー」して貼り付け、.ug-abyss の高さを決めます。
  2. 絵は SCENES の7つの関数で描いています。真ん中の穴の半径が h（0.2）で、その穴に次の絵がぴったり入ります。穴の形は HOLE、名前は NAMES です。

カスタマイズ

  • 1層あたりの拡大率は Z、1層進むのに必要なスクロール量は STEP（px）、層の数は LEVELS です。
  • ひねりは TURN です。0 にするとまっすぐ潜ります。

注意

ズームと回転が続くので、酔いやすい人がいます。視差効果を減らす設定の環境では、拡大と回転をやめて、層ごとに絵を切り替えるだけにしています。

S-006勝手に走るジェットコースターCRAZY度 ★★★★★
スクロールで巻き上げの坂まで進めると、あとは手を離しても登り、頂上から落ち、宙返りして、箱のスクロールバーが勝手に動き続けます。
Canvas 2D物理計算スクロール制御Web Audio

これは何？

箱のスクロール位置を、線路の上の車の位置として扱います。スクロールしている間は手で押して動かせますが、手を止めると坂の傾きに合わせて車が勝手に転がり、その位置をスクロール位置へ書き戻します。巻き上げの坂ではチェーンが車を引き上げ、頂上を越えるとゴールまで止まりません。途中でスクロールすれば、いつでも手で押し戻せます。

使い方

  1. 「全部コピー」して貼り付け、.ug-coaster の高さ（min-height）を決めます。
  2. 指で触れている間と、スクロールが続いている間は勝手に動きません。音を鳴らすときは .ug-coaster に data-sound を付けます。

カスタマイズ

  • 線路の形は PIECES（長さと、その間に曲がる角度）の並びです。6.283 を入れると1回転の宙返りになります。
  • 重力は G、巻き上げの速さは LIFT、車両の数は CARS です。

注意

スクロール位置をJSで書き換える演出です。箱の中だけを動かし、ページ自体のスクロールには触れません。視差効果を減らす設定の環境では勝手には動かず、スクロールした分だけ進みます。スマホでは、最初に一度箱をタップすると音が出るようになります。