tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。前回の記事では、CSSアニメーションの新概念「ScrollTimeline」についての記事を書きました。今回は、それの更に発展形として、もうひとつの新概念である「ViewTimeline」と組み合わせるとどんな事ができるか?と言うことについて、書いていきたいと思います。なんと、CSSだけでスライダーコンテンツが作れちゃいます早速ですが、次の動画をご覧ください。↑この動画の、カードが8枚横に並んだスライダー型のコンテンツ。実はこちら、CSSだけで出来ています。CSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を組み合わせると、こういう新しいアプローチができるようになるわけです。今まで「時間軸」しか存在しなかった世界に「スクロール軸」の概念が加わったことにより、Webサイト制作・Webデザイン制作において、この例の様に「本当にあたらしいアプローチができる」というわけなんです!実際に動かせるサンプル次のリンクに、上記のセクションでご紹介したCSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を組み合わせた、CSSだけで作成したスライダーコンテンツのサンプルを用意しました。スクロールに応じてスライドが反応する様子を、ぜひ実際にお試しください!新概念「ScrollTimeline」を「ViewTimeline」と組み合わせたサンプル(後日公開予定)コードのサンプルサンプルコードは現在、手元で調整中のため、準備ができたら後日ここに記載する予定です。Timeline)」と、もうひとつの新概念である「ビュータイムライン(ViewTimeline)」を組み合わせるとどんな事ができるか?と言うことについて、CSSだけで作られたスライダーコンテンツを例に、記事を書きました。いかがでしたでしょうか。Timeline)」と「ビュータイムライン(ViewTimeline)」の魅力が伝わりやすいような記事を書いていきたく思ってますので続編をお待ちください。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。「SKILLUP.TEDATE」の出題数が、500問になりました!...ので、お楽しみください!新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。Timeline]dialog要素を使ったモーダル内から、チェックボックス等の選択値を受け取る方法カード型レイアウトと相性抜群!gapプロパティを使った簡単レイアウト[css]私の修行時代のお話。]印象的な文字表現が簡単にできる。