DEMO
CODE
<div class="demo-stage gps-stage"><span class="gps-layer gps-back">BACK</span><span class="gps-layer gps-mid">MID</span><span class="gps-layer gps-front">FRONT</span></div>
.gps-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:4rem; background:#0F0F12; min-height:340px; overflow:hidden; }
.gps-layer { position:absolute; font-family:'Oswald',sans-serif; letter-spacing:.2em; }
.gps-back { font-size:4rem; color:rgba(123,55,168,.35); }
.gps-mid { font-size:2.2rem; color:rgba(91,170,222,.6); }
.gps-front { font-size:1.4rem; color:#E91B89; }
// 要 GSAP + ScrollTrigger CDN
gsap.registerPlugin(ScrollTrigger);
[['.gps-back', -30], ['.gps-mid', -60], ['.gps-front', -110]].forEach(function(p){
gsap.to(p[0], { yPercent: p[1], ease: 'none',
scrollTrigger: { trigger: '.gps-stage', start: 'top bottom', end: 'bottom top', scrub: true } });
});
AI PROMPT
スクロール連動で複数レイヤーが異なる速度で動くパララックスをGSAPで作って。gsap.registerPlugin(ScrollTrigger)後、各レイヤーに gsap.to(layer,{ yPercent: 速度, ease:'none', scrollTrigger:{ trigger:'.stage', start:'top bottom', end:'bottom top', scrub:true } })。scrub:true でスクロール位置にアニメを直結。yPercentを奥ほど小さく(-30)・手前ほど大きく(-110)すると奥行きが出る。GSAP CDN(gsap+ScrollTrigger)が必要。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
スクロール量に連動して複数レイヤーが異なる速度で動く視差(パララックス)。GSAP ScrollTriggerのscrubで滑らかに同期。この効果はアニメーションライブラリGSAPで実装され、スクロール連動にはScrollTriggerを組み合わせる。タイムラインで複数の動きを順序立てて精密に制御できるのが特長です。
縦長LP・記事・ストーリーテリング型ページなど、読み進めに合わせた登場演出に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
JavaScriptで座標やタイミングを計算しながら要素のstyleを書き換えます。更新はrequestAnimationFrameでブラウザの描画タイミングに同期させ、位置の変更はtransformで行うとレイアウト再計算を避けられて軽くなります。動きを減らす設定（prefers-reduced-motion）の利用者へは演出を控えめにする配慮も大切です。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。