Slides of section縦スクロールでスライドっぽく次のセクションを表示

スライドが切り替わるような仕組みを構築できるか試してみたところ、構築可能だった。
（プラグイン等は一切未使用）

こちらはposition: fixed;で構築しているが、position: sticky;を使用すればページの途中に登場させることも可能。

How to build仕組み

  1. セクション（今回はセクションごとにスライド１枚としている）を一覧で取得
  2. 表示領域自体は position: fixed; で固定しているので、画面をスクロールできるようにするため、高さが100vhのスクロール用div（中身は何も無し）をセクションの個数分用意
    　→ これで画面がスクロールできるようになる
  3. スクロール用divに Intersection Observer でイベント登録。
    スクロールしてdivに入ったら、各セクションのスタイルを調整する。
    （今回はfilter, boxShadow, transform）

上記のようにかなりシンプルな仕組みとなっている。

Other他にどのようなことができるか

各スライドはtransformで位置調整しているため、今回のように前後に配置する以外にも、
横に並べたり斜めに配置したりと今回と違うレイアウトでも対応可能。

SEC03

テキストテキストテキストテキスト

SEC04

テキストテキストテキストテキスト

SEC05

テキストテキストテキストテキスト

SEC06

テキストテキストテキストテキスト

SEC07

テキストテキストテキストテキスト