映画的なスクロールと3D
既存のサイトに映画的なテクニックを1つ追加するための短いルーチンです。futuristic-web-designスキルの映画的ステップを、単独で実行できるようにパッケージ化したものです。
もし ../futuristic-web-design/ がこのスキルの隣にある場合、スクロールまたは3Dコードを書く前に、そちらの references/cinematic-moves.md を読んでください。そこには、以下の各レシピのコード、再エンコードコマンド、完全なライブ3Dスクロールストーリーのプロセスが記載されています。
予算
使用できるテクニックは5つあります：背景動画ヒーロー、スクロール連動モーション、固定セクション、パララックス深度、ライブ3Dオブジェクトです。背景動画ヒーローと、残り4つの中から最大2つまでを使用してください。これらすべてを使用したページはデモリールのように見え、訪問者を疲れさせ、各エフェクトの効果を弱めます。
コードを書く前に、ページを確認し、各配置について自問してください：ここにモーションを加えることで何かが明確になるか、または訪問者に特定の感情を引き起こすか？何を、どこに追加するか、それが何に貢献し、何を犠牲にするかを明示してください。2つ追加した後でユーザーがさらに要求した場合は、トレードオフ（追加される重さと、すでにあるエフェクトのインパクト低下）について率直に伝えてください。
すべてのテクニックに対するガードレール
装飾がページをダウンさせることは決して許されません。
- 動きの抑制。
prefers-reduced-motion: reduceの下では、固定、スクラブ、3Dのダウンロードは行いません。通常の積み重ねレイアウトまたは静止画像を表示します。これはスムーススクロールやトランジションもカバーします。スクリプト駆動のモーションはCSSに従わないため、独自のmatchMediaチェックが必要です。 - タッチ。 指でのスクロールを確認：ジャンプがないこと、水平方向のオーバーフローがないこと、スクロールトラップがないこと。
- 小画面。 768px未満では、3Dを静止画像に置き換えます。
- 遅延読み込み。 エフェクトコードは、そのセクションがビューポートに近づいたときに取得し、初期ロード時には決して取得しません。
- 障害。 エフェクトがエラーになった場合、またはWebGLがない場合、静止画像が残り、ページの残りの部分は動作します。
- 真実の数値。 アニメーションカウンターは決して誤った値で停止してはいけません。データではなく、表現をアニメーション化してください。
- バージョン。 GSAP、Three.js、React Three Fiber、Lenisの現在のドキュメントと互換性のあるバージョンを確認してください。各パッケージをインストールする前に確認を求めてください。
レシピ
背景動画ヒーロー
autoplay、muted、loop、playsinline、poster属性を持つvideo要素。スマートフォンでは、ミュートかつインラインの動画のみ自動再生します。- ポスター（
hero-poster.webp）が最初に描画されるため、hero.mp4のダウンロード中に空のフレームが表示されることはありません。 - 読みやすさのために、テキストブロックの下にのみグラデーションのスリムを配置します。クリップ全体を暗くすると、動画を持つ意味が損なわれます。見出しは数秒以内に読めるようにする必要があります。
- テキストをクリップの焦点となる被写体から遠ざけます。これをデスクトップとスマートフォンで個別に決定します。
- 動きの抑制設定下では、ポスターを表示し、自動再生をスキップします。
固定スクロールストーリー
- セクションの上部がビューポートの上部に達すると固定され、スクロールが続くにつれて約3つのビートをステップ実行し、その後解放されます。上にスクロールすると逆方向に再生されます。
- 各ビートは、特大の数字、短い見出し、1文の実際のコピーで構成されます。
gsap.matchMedia()内でGSAP ScrollTrigger（pinとscrub）を使用して構築し、モーションが許可されている場合のみ存在し、後始末を行うようにします。- マークアップはプレーンな積み重ねビートとして作成します。スクリプトが実行されていない場合、そのマークアップがすでにフォールバックとなります。
- 固定はスマートフォンで最も問題を起こしやすいテクニックです。実際のデバイスで親指によるテストを依頼し、テストが行われなかった場合はその旨を伝えてください。
プロシージャルな3Dアクセント（1つ）
- セクションのコンテンツの隣に、一度だけ配置される単一の小さなオブジェクト。フォームの口頭による説明から、プリミティブからコードでジオメトリを構築します。ユーザーが要求しない限り、ダウンロードしたモデルファイルは使用しません。
- ゆっくりとしたアイドル回転と、スクロールによって駆動されるわずかな傾き。マテリアルとライティングはデザインシステムから取得し、スタジオのプロダクトショットのように照明を当てます。
- コンテナは最初にオブジェクトの静止画像で開始します。3Dコードが読み込まれてマウントされた後にのみ、キャンバスがそれを置き換えます。
- 768px以上、モーションが許可され、セクションがビューポートに近い場合にのみ読み込みます。オフスクリーン中はレンダリングを一時停止し、デバイスピクセル比を2に制限します。
スクロール駆動動画
- 再生ヘッドがスクロール位置に両方向で追従する短いクリップ。「製品が分解する」効果を、ライブ3Dよりもはるかに少ないバイト数で実現します。
- 最初に再エンコードして、すべてのフレームをキーフレームにし、オーディオを削除し、クリップを移動に必要な秒数にトリミングします。ターゲットは約1MB以下です。
- セクションを固定し、スクロール進行度を
video.currentTimeにマッピングします。要素にmutedとplaysinlineをマークし、play()を呼び出さないでください。 - 同じ進行度の値から順にテキストの吹き出しを表示します。固定は迅速に解除します。
- 動きの抑制設定下では、最も情報量の多い静止フレームを表示します。
コストを測定する
テクニックを追加した後、転送サイズを前後で比較し、変更されたファイルと追加されたパッケージを示す短いテーブルを報告してください。何かが重い場合は、軽量化します。それでも重いままの場合は、削除します。