画像が、筋を引きながら左から現れる。スクロールで奥行きがつくオープニング

画像が、筋を引きながら左から現れる。スクロールで奥行きがつくオープニング

仕組み

1. 1枚の板に、まとめて描く：HTML には空の枠だけを置き、毎フレーム、枠の位置と大きさを測って、同じ場所に画像を描きます（gl.viewport と gl.scissor）。親の枠からはみ出さないよう、切り抜きもかけます。
2. 出方 k を決める：進み具合 uTrans（0〜1）と、筋の模様から、ピクセルごとの出方 k を計算します。x を引くので左から、模様を引くので、筋ごとにずれて現れます。
3. k を、色・位置・拡大に使う：色には k を掛け、見る位置は横にずらし、拡大率は 0.8 から 0.9 へ動かします。現れたあと、わずかに拡大して落ち着きます。
4. 筋の模様は、コードで描く：横にゆるやかで、縦に細かく変わるノイズを作り、平均 0.39・ばらつき 0.14 にそろえます。画像ファイルは使いません。
5. 登場の時間割：覆いを 0.3 秒で消し、1 枚目は 1.4 秒後から 5 秒（ease-out）で現れます。ロゴは、CSS の mask-position を動かして、左から順に見せます。
6. ほかの画像：画面の端から、高さの約 2 割入ったところで一度だけ、0.15 から 1 へ 4 秒で現れます。
7. 慣性スクロールは自前：中身を固定して transform で動かし、毎フレーム、目標へ少しずつ近づけます。目標は実際の 1.05 倍です。
8. 種類ごとの動き：1 枚目は 0.7 倍の速さで下がりつつ拡大。枠の中の画像は、画面の下に近いほど拡大。背景は 0.1 倍だけ遅れて動きます。
9. 縦を横に変える区間：区間の高さを「横幅の合計 − 画面の幅」で確保し、貼りつけた帯を、スクロールした分だけ左へ動かします。
10. 文字は「差の色」：ロゴと見出しを mix-blend-mode: difference にして、白地では黒、暗い画像の上では明るく見せます。

シェーダー（要部）

// 出方 k を決める（GLSL の一部）
vec4 d = texture2D(uDisp, c + uc * (1.0 - uTrans));   // 筋の模様
float k  = clamp(2.0 * uTrans - d.r * 0.5 - vUv.x, 0.0, 1.0);
float k2 = cubicInOut(k);

vec2 uv = vec2(0.5 + sin((1.0 - k2) * 0.1), 0.5)       // 位置をずらす
        + uc * uCover * (0.8 + 0.1 * k2);              // 拡大から落ち着く
gl_FragColor = vec4(texture2D(uTex, uv).rgb * k, k);

こだわり・気をつけたこと

• 背景は白にします。暗い背景だと、同じ式でも筋が「黒い影」に見えます。白地だと、画像がかすんで揺らいで見えます。
• 帯の外に、専用の文字の層を置きます。差の色の合成は、同じ重なりの中の絵としか混ざらないので、横に流れる帯の中に文字を置くと、白地で消えます。
• 動きを減らす設定には、覆い・登場・慣性・視差を省きます。画像は、完成した状態で見せます。
• WebGL が使えなくても崩れません。シェーダーの失敗も含め、Canvas 2D の透明度に切り替えます。
• スマホ・タブレット（幅 768px 未満）は、縦に並べます。自作の慣性は、マウスのある環境だけです。
• 写真が届くまで覆いで隠し、6 秒で諦めます。届かないときは、コードで描いた絵に切り替えます。
• 描くのは、見えている画像だけです。解像度は最大 1.5 倍までに抑えます。画面サイズの変更にも追従します。
• 飾りの画像は、読み上げの対象から外します。

1 枚目の写真：Unsplash の Atharva Tulsi さんの作品。ほかの画像は、コードで描いています。英字フォント（Cormorant Garamond・Inter）を、Google Fonts から読み込んでいます。