CRAZY Code動きの実験室
CRAZY Code / 実験区画 No.10
CRAZY度 ★★★★ ─ 普通に切り替わりません

奇抜トランジション

画面Aから画面Bへ移るだけの場面で、紙を丸めて捨てたり、ジッパーで開けたり、燃やしたりします。どれもタブ切り替えやページ遷移に組み込める作りで、中の画面を差し替えればそのまま使えます。

6収録サンプル
0依存ライブラリ
¥0商用OK
S-001くしゃくしゃポイCRAZY度 ★★★★★
今の画面が紙のようにくしゃくしゃに丸まり、放物線を描いてゴミ箱へ飛び込みます。「ゴミ箱から拾う」で、丸めた紙が飛び出して広がり、前の画面に戻ります。
三角形メッシュmatrix()clip-pathWeb Audio

これは何？

画面を60枚の三角形に切り分け、頂点を少しずつ中心へ寄せて紙を丸め、ゴミ箱へ投げ入れる画面切り替えです。三角形は画面の本物の複製を切り抜いたもので、1枚ずつ matrix() で変形させているので、画像に置き換えずに中身がそのまま丸まります。逆再生すると、丸めた紙が広がって前の画面に戻ります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. .ug-scrunch-page が1画面です。中身を差し替え、枚数も自由に増やせます。
  3. 切り替えが終わるたびに、外側の .ug-scrunch に ugchange イベントが届きます（e.detail.index が今の画面の番号）。
  4. ページ遷移に使うときは、リンクのクリックを止めて .ug-scrunch-go を押させ、ugchange が来たところで location.href を移します。

カスタマイズ

  • 紙の分割数は COLS・ROWS（6×5）、丸める時間は T1（0.8秒）、投げる時間は T2（0.62秒）です。
  • しわの深さは pose() の amp、丸めた玉の大きさは makeWad() の rb です。

注意

丸めている間は画面を60枚複製します。動画・iframe・入力中のフォームを含む画面には向きません。紙の模様は複製にも写るので、背景は画像でなくCSSのグラデーションでも構いません。

S-002跳ね回るタブCRAZY度 ★★★★
タブを切り替えると、ジャケット・曲名・再生ボタンが宙返りしながら新しい位置へ飛び移ります。View Transitions に対応していないブラウザでも同じ動きになります。
View TransitionsWeb AnimationsFLIPWeb Audio

これは何？

View Transitions API（document.startViewTransition）で、3つの表示（一覧・再生中・歌詞）を切り替えるタブです。同じ部品が別の場所・大きさへ移るとき、まっすぐ動かさずに跳ね上がって回転させ、はみ出すくらい行き過ぎてから止めます。残りの中身は下へ落ち、新しい中身が上から弾んで入ります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. 表示は data-mode の値で決まり、部品の位置はCSSに書いてあります。HTMLは1組だけで、部品を作り直していません。
  3. 既存のタブに組み込むときは、切り替え処理を document.startViewTransition(() => 切り替え) で包み、動かしたい部品に切り替えの間だけ view-transition-name を付けます（この見本の name()）。

カスタマイズ

  • 宙返りの動きは HOP、行き過ぎ具合はCSSの cubic-bezier(.5,-.35,.2,1.35) です。
  • 動かす部品を増やすときは、data-vt を付けて HOP とCSSの ::view-transition-group(...) に同じ名前を足します。

注意

名前を常に付けたままにすると、同じ見本を2つ置いたときに名前がぶつかって切り替えが中止されます。切り替えの間はページ全体が0.8秒ほど操作を受け付けません（View Transitions の仕様）。対応していないブラウザでは、部品を測って動かす方式（FLIP）で同じ動きを出します。

S-003ジッパー開封CRAZY度 ★★★★
画面の真ん中にジッパーが付いています。つまみを引き下ろすと布が左右にめくれて次の画面がのぞき、下まで下ろすと両側が外れて飛んでいきます。
Pointer EventsDOMMatrixCanvas 2DWeb Audio

これは何？

つまみを指やマウスで引き下ろして開ける画面切り替えです。開いた部分は左右それぞれ6枚の板に分けて少しずつ角度を足し、布が曲がってめくれるように見せています。歯はキャンバスに描き、つまみが歯を1つ越えるたびに音が鳴ります。6割より手前で離すと閉じ直します。

使い方

  1. 「全部コピー」して貼り付けます。
  2. .ug-zipper-page が1画面です。開けるたびに次の画面へ進み、最後まで行くと最初に戻ります。
  3. キーボードでは、つまみにフォーカスして上下の矢印キーで動かし、Enterで一気に開けられます。
  4. 開け終わると .ug-zipper に ugchange イベントが届きます。会員ページの入口などに置き、ここで本当の内容を読み込むこともできます。

カスタマイズ

  • 布の曲がり方は render() の al、板の枚数は SEG、歯の間隔は GAP です。
  • 離したときに開ききる境目は settle() の .6 です。

注意

開けている間は今の画面を12枚複製します。つまみの上ではスクロールを止めているので、スマホでは画面の他の場所を触るとスクロールできます。

S-004裏返るタイルCRAZY度 ★★★★
画面が40枚のタイルに分かれ、押した場所から波のように1枚ずつ浮き上がって裏返り、裏面に次の画面が現れます。めくり方は波紋・ドミノ・バラバラの3種類です。
3D transformWeb Animationsbackface-visibilityWeb Audio

これは何？

画面を格子に区切り、1枚ずつ表に今の画面、裏に次の画面を貼ったタイルを作って裏返す切り替えです。押した点から遠いタイルほど遅れて回るので、波紋が広がるように画面が入れ替わります。

使い方

  1. 「全部コピー」して貼り付けます。
  2. .ug-tileflip-page が1画面です。画面を押すと次へ、下の番号を押すとその画面へ移ります。
  3. キーボードでは、画面にフォーカスしてEnterで次へ進みます。
  4. 移り終わると .ug-tileflip に ugchange イベントが届きます。

カスタマイズ

  • タイルの数は go() の cols（幅360px未満は6列、それ以上は8列）です。
  • 1枚が裏返る時間は DUR（700ミリ秒）、波が端まで届く時間は SPREAD（560ミリ秒）です。

注意

切り替えの間はタイル1枚につき画面を2つ複製します（40枚なら80個）。中身の多い画面では列数を減らしてください。

S-005カメラの絞り遷移CRAZY度 ★★★
メニューを押すと、7枚の羽根が回りながら閉じて画面を覆い、カシャッと切ったあと、ピントを合わせ直しながら次のページが開きます。
Canvas 2DWeb AnimationsWeb Audio

これは何？

カメラの絞り羽根で画面を閉じ、開くと次のページになっている切り替えです。羽根は多角形の各辺を外へ延ばした形で描いているので、閉じるにつれて羽根が回ります。閉じる間は画面がぼけ、開くときは明るく飛んだ状態からピントが合います。

使い方

  1. 「全部コピー」して貼り付けます。
  2. data-go="番号" を付けたボタンは、メニューでもページ内のボタンでも、そのページへ移ります。
  3. 移り終わると .ug-iris に ugchange イベントが届きます。写真ギャラリーや撮影系サイトのページ切り替えに合います。

カスタマイズ

  • 羽根の枚数は N（7枚）です。5〜9枚で印象が変わります。
  • 閉じる時間は T_CLOSE、閉じたままの時間は T_HOLD、開く時間は T_OPEN です。
  • 羽根の色は blades() のグラデーションで決めています。

注意

羽根は画面と同じ大きさのキャンバス1枚に描くので軽く動きます。閉じた瞬間に中身を差し替えるので、読み込みに時間がかかるページでは、閉じたまま待たせる処理を足してください。

S-006燃えて溶けるスライドCRAZY度 ★★★★★
押した場所から画面が焦げて燃え広がり、灰の下から次のスライドが現れます。ほかに、絵が垂れて流れ落ちる「溶かす」、粗いマスに砕けて入れ替わる「モザイク」を選べます。
WebGLシェーダーCanvas 2DWeb Audio

これは何？

WebGL（GPU）で2枚の絵を混ぜるスライドショーです。「燃やす」はノイズと押した点からの距離で燃える順番を決め、焦げ・炎の縁・火の粉を描きます。「溶かす」は列ごとに違う速さで絵を下へずらし、「モザイク」は絵を粗いマスにしてから、押した点に近いマスから次のスライドへ入れ替えます。

使い方

  1. 「全部コピー」して貼り付け、.ug-dissolve の大きさを決めます。
  2. スライドの絵は SLIDES の関数でキャンバスに描いています。写真に差し替えるときは、関数の中で cover(c, img, w, h) を呼びます（画像は読み込み済みで、同じサイトに置いたもの）。
  3. 画面を押すと押した場所から、下のボタンを押すと中央から切り替わります。移り終わると ugchange イベントが届きます。

カスタマイズ

  • 切り替えの秒数は DUR（燃やす・溶かす・モザイクの順）です。
  • 炎の縁の太さはシェーダーの .05、焦げの幅は .16、溶ける速さのばらつきは col*1.3 です。

注意

効くのはキャンバスに描いた絵だけで、HTMLの文章は燃えません。画像を使う場合、別のサイトの画像はセキュリティの制限でWebGLに渡せません。WebGLが使えない環境では、ふつうのクロスフェードになります。