Scroll Trigger（スクロールトリガー） — CSS+JS · AIプロンプト付き

CODE

HTML

<div class="demo-stage" style="padding:0"><div class="st-wrap" id="stWrap"><div class="st-item">SCROLL TO REVEAL</div><div class="st-item">FADE IN ELEMENT</div><div class="st-item">SLIDE FROM LEFT</div><div class="st-item">ZOOM IN EFFECT</div></div><p style="text-align:center;padding:1rem;color:#5A5A5A;font-size:.85rem">↑ デモ枠内でスクロール</p></div>

CSS

.st-wrap { height:280px; overflow-y:scroll; padding:2rem; }
.st-item { padding:2rem; margin:1rem 0; background:#1A1A1A; color:#fff; text-align:center; font-family:'Oswald',sans-serif; letter-spacing:.2em; opacity:0; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease; }
.st-item.visible { opacity:1; transform:translateY(0); }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .st-item {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

const wrap = document.getElementById('stWrap'); if(wrap && 'IntersectionObserver' in window){ const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('visible'); }); }, { root: wrap, threshold: 0.2 }); wrap.querySelectorAll('.st-item').forEach(el => obs.observe(el)); }

AI PROMPT

Claude Code Cursor v0

PROMPT

IntersectionObserverでスクロールトリガーフェードイン。初期状態opacity:0+translateY(40px)、画面に入ったら.visibleクラスでopacity:1+translateY(0)。transition:opacity .8s ease+transform .8s ease。threshold:0.2で20%見えたら発火。複数要素対応。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

スクロールトリガー（Scroll Trigger）とは

スクロールで要素が画面に入ったタイミングでフェードイン・スライドインする効果。IntersectionObserverで実装。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

縦長LP・記事・ストーリーテリング型ページなど、読み進めに合わせた登場演出に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。

FAQ

スクロールトリガー（Scroll Trigger）はどんな効果ですか？

スクロールで要素が画面に入ったタイミングでフェードイン・スライドインする効果。IntersectionObserverで実装。縦長LP・記事・ストーリーテリング型ページなど、読み進めに合わせた登場演出に向く演出です。

Scroll TriggerはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Scroll Trigger

学びを止めない

RELATED EFFECTS

スクロールトリガー（Scroll Trigger）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ