Scroll-film 個人サイト
スクロールが再生ヘッドになる個人サイトまたはポートフォリオサイトを構築します。動画ファイルではありません。心地よいペース、完全レスポンシブ、プログレッシブエンハンスメント。
権限
- 最初にCSSのstickyシーンとスクロール駆動アニメーションを使用します。CSSでピン留めやスクラブができない場合のみタイムラインライブラリを使用します。
- リポジトリのアートディレクションやテイストスキルに従います。そのテイストに反する汎用的なフロントエンドキットには手を出さないでください。
- 公式のscroll-timelineスキルがインストールされている場合はそれを優先します。
- アイデアカタログ（はい／もしかして）: blur-fade、glare-hover、scroll-progress、遅延ポインタ、ノイズ、光線。CSSまたはタイムラインライブラリで再実装します。別のフレームワークのモーションプリミティブをそのまま貼り付けないでください。
prefers-reduced-motion: reduceを尊重します——静止画、同じコンテンツ順、モーションに依存した行動喚起は禁止。
カメララダー（最初に成立する段階で停止）
- 冗長なシーンを削除します。
- CSS: stickyシーン、
animation-timeline: view()/scroll()、transformとopacityのみ。 - CSSでシーンのピン留めやスクラブができない場合のみスクロールトリガーライブラリを追加します。穏やかなスクラブ、線形イージング、アンマウント時に停止。transformとopacityのみアニメーションさせます。
- サードパーティのスムーススクロールハイジャック、キャンバスフレームシーケンス、3Dヒーロー、
<video>currentTimeスクラブは追加しないでください。
シーン文法
- 最大4〜6シーン。隣接するカットは同じレイアウトファミリを共有してはいけません。
- 開く、保持（ピン＋スクラブ）、切る、閉じる。
- ピンパターン: 高いスクローラと、固定された全画面静止画。
- ページ全体の強制スクロールスナップは禁止。
- JavaScriptがオフでもコンテンツは読める必要があります。スクロールハイジャックなし。mousemoveやscrollのフレームごとのフレームワーク状態は禁止。
個人サイトのコンテンツ（指示に応じて適応）
典型的な構成: アイデンティティ、私が作るもの、現在のプロダクト、リンク（彼らが与えた実際のプロフィール）、閉じの行動喚起。 リンクは実際のURLのみ——プロフィールをでっち上げないでください。不足している場合は実際のものを尋ねてください。
カーソル
ばねラグやグレアを伴うカスタムカーソルはプログレッシブエンハンスメントとして許可します。reduced-motionやタッチではネイティブカーソルを使用可能にしておきます。フレームごとのフレームワーク状態ではなく、アニメーションフレームでスロットリングしたポインタリスナーを優先します。
スタックのデフォルト
- 現代的なウェブフレームワークで構築します。
- 所有者のホスティングアカウントにデプロイします。別のチームのアカウントではありません。
- コーディングはローカルのコーディングデフォルトに従います: 実装、次にセカンドレビュー、そしてチェックアップルーチンを設定します。
完了の定義
- 所有者のアカウント下の公開URL
- スクロールが映画のように感じられる（心地よく、カクカクしない）
- レスポンシブ、reduced-motionでは静止画
- 実際のリンクのみ
- 公開時にURLを報告する