今回は、それの更に発展形として、もうひとつの新概念である「ViewTimeline」と組み合わせるとどんな事ができるか?
と言うことについて、書いていきたいと思います。
なんと、CSSだけでスライダーコンテンツが作れちゃいます
早速ですが、次の動画をご覧ください。
↑この動画の、カードが8枚横に並んだスライダー型のコンテンツ。
実はこちら、CSSだけで出来ています。
CSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を組み合わせると、
こういう新しいアプローチができるようになるわけです。
「CSSアニメーションの新概念」と書きましたが、
つまり「単純にCSSアニメーションの手法が変わるだけではなく」、
今まで「時間軸」しか存在しなかった世界に「スクロール軸」の概念が加わったことにより、
Webサイト制作・Webデザイン制作において、この例の様に
「本当にあたらしいアプローチができる」
というわけなんです!
実際に動かせるサンプル
次のリンクに、上記のセクションでご紹介した
CSSアニメーションの新概念「ScrollTimeline」と「ViewTimeline」を組み合わせた、
CSSだけで作成したスライダーコンテンツのサンプルを用意しました。
スクロールに応じてスライドが反応する様子を、ぜひ実際にお試しください!
【新概念「ScrollTimeline」を「ViewTimeline」と組み合わせたサンプル:CSSだけで出来ているスライダー】
[慣性スクロール版](JSライブラリ Lenis と併用)]
[通常版]
(後日公開予定)コードのサンプル
サンプルコードは現在、手元で調整中のため、準備ができたら後日ここに記載する予定です。
しばらくお待ちください。
この記事のまとめ
今回は、Web制作・Webデザインの世界における
新しい概念「スクロールタイムライン(Scroll Timeline)」と、
もうひとつの新概念である「ビュータイムライン(ViewTimeline)」を組み合わせるとどんな事ができるか?
と言うことについて、
CSSだけで作られたスライダーコンテンツを例に、記事を書きました。
いかがでしたでしょうか。
今後も、「スクロールタイムライン(Scroll Timeline)」と「ビュータイムライン(ViewTimeline)」の魅力が伝わりやすいような
記事を書いていきたく思ってますので続編をお待ちください。
この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。
参考文献等:
Scroll-driven-animations(https://scroll-driven-animations.style/) – Copyright (c) Bramus (https://github.com/bramus), Chrome Developer Relations Engineer at Google
┗ License – https://www.apache.org/licenses/LICENSE-2.0.txt (Apache License Version 2.0)
scroll-timeline.js – Copyright (c) Robert Flack (https://github.com/flackr)
┗ License – https://www.apache.org/licenses/LICENSE-2.0.txt (Apache License Version 2.0)