没入型スクロール・レイヤーピン

概要

各セクションが画面に貼り付き（sticky）、スクロールで下のセクションが上に重なっていく、フルスクリーンの没入型ストーリーテリング演出。ヒストリー紹介やブランドストーリー向き。

・GSAP + ScrollTrigger（スクロール連動）

・CSS `position: sticky`（レイヤーの重なり）

・重なり演出の主役はJSではなくCSSの `position: sticky; top: 0; height: 100vh` で、各セクションが画面に留まりながら次が覆いかぶさる

・セクションごとに3つのアニメーションを付与。コンテンツカードは `y`・`opacity`・`scale` の `fromTo` で `top center` 到達時に出現（`toggleActions: “play none none reverse”`）

・背景画像は `start: “top bottom”` 〜 `end: “bottom top”`・`scrub: true` で、スクロール全域にわたり `y` と `scale` を補間するパララックス

・英語タイトルは `textShadow` を `scrub: 1` で徐々に強め、スクロールに追従して発光していく演出

・カードは `backdrop-filter: blur(12px)` のガラス調で、背景画像のパララックスと重なり合う

.sticky-section {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticky-section {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

SHARE: X