tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。ViewTimeline]今回も、CSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を組み合わせた記事の続編です!以前の記事では、スクロールに応じて単純に画像が出現する、という内容を書きました。今回はそれプラス、「画像だけではなく、任意の他の要素」も一緒に連動して動かす方法について書いていきたいと思います。これを応用すると「スクロール量に応じたパララックスエフェクト」なんかも作れる様になる、ということですね。他の要素も連動して動く早速ですが今回も、まずは次の動画をご覧ください。↑こちらの動画ですが、「ページのスクロールに応じて」セクションごとにトラッドな車の画像が出現するのですが、その際に、ガレージのシャッターが開く様な動きも連動して行われています。実はこちらも、以前の記事のサンプルと同じく、「CSSだけ」で出来ています。CSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を組み合わせると、こういう視差をともなったエフェクト、視覚効果もつくることができる、というもうひとつのサンプルになります。・それらを「ScrollTimeline」と「ViewTimeline」と連動させることで、スクロール量に反応して、画像とシャッターがどちらも連動して動く↑ということをしています。コードのサンプルなどは次のセクションに続きます。上のセクションの動画と同じ挙動をするサンプルを用意しました。スクロールに応じて反応する、画像とシャッターの動作、CSSだけで視差効果が生まれる様子を、ぜひ実際にお試しください!スクロールに連動して要素が動く、視差エフェクトのサンプルコードのサンプル_html側htmlのサンプルコードです。画像出現セクションに、スクロールと連動して動くspan要素があたらしく付与されている点だけです。本文は長いので...(中略)...としています。※以前の記事同様、画像は適宜、16:9の画像を用意して当ててみれば動きます。続いて、CSSのサンプルです。↑しているくらいの変更になります。同じですので、詳しい解説はそちらと見比べてみると、理解しやすいかと思います。あたらしく付与したspan要素が動くアニメーション。span要素に付与する背景画像。Timeline)」ですが、とても「新しい」ということもあり、この記事を書いている時点での各ブラウザの対応状況は次の通りです。未対応...の状況です。部分に記載があります。書いたのと同じことですが、ご存知、MDNにもすでに、ViewTimeline(ビュータイムライン)の解説ページがあります。必要な仕様の理解としては、MDNのこのページを読めば大体わかるかと思います。関する説明も掲載されています。一読すると、理解が深まるかと思います。「ページのスクロールに応じて」セクションごとに画像が、シャッターが開く様なエフェクト(今回は、これが画像とはことなる要素)をともなって出現する例をもとに、記事を書きました。いかがでしたでしょうか。見比べながら確認すると、理解しやすいかと思います。Timeline)」と「ビュータイムライン(ViewTimeline)」のすばらしい魅力が伝わりやすいような記事を書いていきたく思ってますので、またぜひぜひ、続編をお待ちください。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。API]素のJavascript(VanillaJS)で、要素に複数classを一括付与する方法[JavaScript]印象的な文字表現が簡単にできる。