【驚き】CSSだけでスライダーが!? 新概念「Scroll Timeline」を「View Timeline」と組み合わせて、スライダー風UIを作成する方法

新概念「ScrollTimeline」を「ViewTimeline」と組み合わせて、スライダー風UIを作成する方法
この記事をシェアする:
前回の記事では、CSSアニメーションの新概念「ScrollTimeline」についての記事を書きました。

今回は、それの更に発展形として、もうひとつの新概念である「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)

この記事をシェアする: