Stacked Scroll
スタックスクロール
どんな動き？
スクロールを進めると次のセクションが画面下からせり上がってきて、前のセクションの上に覆いかぶさるように重なっていく演出。各セクションがposition: stickyでその場に留まり続けるため、カードを1枚ずつ積み重ねていくような視覚効果が生まれる。ストーリー性のあるLPで章の切り替わりを印象づけたいときに使われる。
よく使う場所
ストーリー型LP章立てコンテンツサービス紹介
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Have each section stick and let the next section slide up to cover it as the user scrolls.Trigger:
Scroll position as each section enters.
Start:
The next section's top edge reaches the top of the viewport.
End:
The next section fully overlaps the previous one and becomes sticky in turn.
Behavior:
Each section is position: sticky at top: 0, so as the user scrolls, the next section slides up from below and covers the previous one, which stays pinned underneath.
Initial state:
translateY: 100% (below viewport)
Final state:
translateY: 0 (fully covering, sticky at top)実装方法の候補
この動きは以下の技術で実装できます。
CSS position: stickyGSAP ScrollTrigger
別名・関連ワード
Section StackingCard Stack ScrollOverlap Scroll