Pin
ピン留め
どんな動き？
指定した範囲だけ要素をビューポート内に固定（ピン留め）し、その間に別の演出を進行させるスクロール手法。要素自体は動かず「そこに留まり続ける」ことで、周囲のコンテンツやテキストがその要素を軸に展開していくような構成を作れる。横スクロール演出やステップ解説など、他のスクロール手法の土台としてもよく使われる。
よく使う場所
ステップ解説横スクロールセクションプロダクトデモ
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Pin the element in place while the user scrolls through a defined section.Trigger:
Scroll position entering a defined pin range.
Start:
The moment the element reaches the top (or center) of the viewport.
End:
The moment the pin range's scroll distance is fully consumed; the element then unpins and normal scrolling resumes.
Behavior:
The element is held fixed in place while the page keeps scrolling around it, so surrounding content moves but the pinned element does not.
Initial state:
position: pinned at a fixed viewport position
Final state:
position: released, resumes normal document flow実装方法の候補
この動きは以下の技術で実装できます。
GSAP ScrollTrigger (pin: true)CSS position: sticky
別名・関連ワード
Scroll PinPinned SectionSticky Pin