tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。Timeline]このところ、CSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を組み合わせて、さまざまな視覚効果を作る方法についての記事を書いています。今回もまた、そのシリーズの記事です。今回は「メインビジュアルがスクロールに応じてヘッダーに変化」する挙動をテーマに、書いていきたいと思います。メインビジュアルがスクロールに応じてヘッダーに変化!早速ですが今回も、まずは次の動画をご覧ください。↑この動画ですが、「ページのスクロールに応じて」、メインビジュアルが「グローバルメニューを伴ったヘッダーに変化」します。実はこちらも、これまでの記事のサンプルと同じく、「CSSだけ」で出来ています。CSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を組み合わせると、こういった斬新な視覚効果もつくることができるんです!※なお今回のサンプルでは、「ScrollTimeline」のみを使用しています。動画と同じ挙動をするサンプルを用意しました。「スクロールによってメインビジュアルが、グローバルメニューを伴ったヘッダーに変化」する様子を、ぜひ実際にお試しください!メインビジュアルがスクロールに応じてヘッダーに変化するサンプルコードのサンプル_html側htmlのサンプルコードです。本文は長いので...(中略)...としています。文章のセクションの内容は、ある程度の長さがあれば内容は何でも良いです。続いて、CSSのサンプルです。大まかな説明はコメントアウトで記載しました。(※やや長めなので、一旦メディアクエリ(スマホサイズのスタイルなど)は省いてます)重要な点は、各構成要素の末尾の方にあるanimation-timeline,animation-range↑このあたりです。コードの後に続いて補足を記載します。メインビジュアルのコンテナに対するアニメーション。変化したヘッダー内でグローバルメニューが出現するアニメーション。キャッチコピー用のアニメーション。ロゴが出現するアニメーション。出現したグローバルメニューを操作できるようにz軸として手前に。100でなくても手前なら可。基本的にはコメントアウトに記載の通りです。従来のCSSアニメーションの手法どおり、必要なアニメーションを定義する。続いて、動かしたい各要素にそのアニメーションを割り当てる。ScrollTimeline(スクロールタイムライン)を定義しています。使い、基準要素のどこから動き出してどこまでで動きが完了するかを設定しています。「スクロール軸」の概念に変わっている、という点を認識することが重要です。Timeline)」は、とても「新しい」ということもあり、この記事を書いている時点での各ブラウザの対応状況は次の通りとなっています。未対応...という状況です。部分に記載があります。MDNでの解説ページご存知、MDNにもすでに、animation-timelineやanimation-rangeの解説ページがあります。MDNのこのページを読めば、大体の仕様がわかるかと思います。MDN↑基本的な仕様が網羅されていますので、一読すると、理解が深まるかと思います。「メインビジュアルがスクロールに応じてヘッダーに変化」する例をもとに、記事を書きました。※なお今回のサンプルでは、「ScrollTimeline」の概念のみを使用しています。画像ではなく、動画を流しても同様なことができます。動画であれば、より目を引く表現ができることと思います。下層ページの特定のコンテンツを紹介するページなどで使用しても、面白いかもしれません。(※使用の際は、くれぐれも要件の確認をお忘れなく。新しい技術ですので、しっかり確認して、裏を取ってから試す事が必須です。Timeline)」と「ビュータイムライン(ViewTimeline)」のすばらしい魅力が伝わりやすいような記事を書いていきたく思ってますので、またぜひぜひ、続編をお待ちください。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。prefers-color-scheme]印象的な文字表現が簡単にできる。:has()]新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。Scss]私の修行時代のお話。