スクロール駆動のスタッキングレイアウト

note

スクロールに応じて複数のパネルが積み重なって表示されるレイアウトデザインです。各パネルは奥から手前へと順番に表示され、スクロール量に応じてサイズや明度が変化することで、奥行きのある表現を実現しています。

実装では、positionプロパティのstickyを指定してスクロール時の固定表示を実現し、並び順に応じてサイズを変化させた上方向の余白を設定することで、積み重なった状態を視覚的に表現します。スクロール量に応じてscaleプロパティの値を変化させ、コンテンツ要素を縮小することで奥に移動しているような動きを与え、filterプロパティで明度とブラー効果を加えることで奥行き感を強調しています。

なお、各コンテンツ領域の高さは、内包するコンテンツに合わせると重なり位置の制御が難しくなるため、すべて同じ高さになるように指定すると実装がしやすくなります。

この表現は、サイトトップページやランディングページなど、デザインの印象を強めたい箇所でとくに効果的です。情報量が多いコンテンツの場合、要素に動きをつけることで閲覧を阻害してしまう恐れがありますが、この表現ではコンテンツ自体のレイアウトを動かさずにセクションごとの転換をさせることができます。

【使用ライブラリ】 GSAP:ScrollTrigger