Scroll Trigger
スクロールトリガー
どんな動き？
要素がビューポート内に入ったタイミングを検知して、フェードやスライドなどのアニメーションを一度だけ発火させる仕組み。スクロール量そのものには連動せず「入った瞬間」がトリガーになる点が、スクロール量と連動し続けるscrubとの大きな違い。Intersection Observerなどで実装され、コンテンツを順番に見せたいセクション演出の基本形として広く使われる。
よく使う場所
セクション見出しカード画像CTAボタン
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Fire a one-time fade-up animation the moment the element scrolls into view.Trigger:
The element crosses into the viewport while scrolling down (Intersection Observer or view-timeline).
Start:
The instant the element's top edge reaches roughly 80% of the viewport height.
End:
Runs once to completion and stays finished, even if the user scrolls back up.
Behavior:
A single fade + upward move fires and auto-plays to the end, independent of further scroll distance — unlike scrub, which stays tied to scroll position throughout.
Initial state:
opacity: 0
translateY: 30px
Final state:
opacity: 1
translateY: 0実装方法の候補
この動きは以下の技術で実装できます。
Intersection ObserverGSAP ScrollTriggerCSS Scroll-driven Animations
別名・関連ワード
Scroll RevealOn Scroll EnterIntersection Trigger