Parallax Scroll

DEMO

CODE

<div class="demo-stage" style="padding:0"><div class="px-wrap" id="pxWrap"><div class="px-back" style="background-image:url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?w=800&q=70)"></div><div class="px-mid">PARALLAX</div><div class="px-front">SCROLL ME</div></div><p style="text-align:center;padding:1rem;color:#5A5A5A;font-size:.85rem">↑ デモ枠内でスクロール</p></div>

.px-wrap { position:relative; height:280px; overflow-y:scroll; overflow-x:hidden; }
.px-wrap::after { content:""; display:block; height:600px; }
.px-back { position:fixed; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; transform:translateZ(-2px) scale(3); z-index:1; }
.px-mid { position:absolute; top:80px; left:50%; transform:translateX(-50%); font-family:'Oswald',sans-serif; font-size:3rem; color:rgba(255,255,255,.4); z-index:2; }
.px-front { position:absolute; top:200px; left:50%; transform:translateX(-50%); font-family:'Oswald',sans-serif; font-size:1.5rem; color:#fff; letter-spacing:.3em; z-index:3; }

const wrap = document.getElementById('pxWrap'); if(wrap){ wrap.addEventListener('scroll', () => { const y = wrap.scrollTop; const back = wrap.querySelector('.px-back'); const mid = wrap.querySelector('.px-mid'); if(back) back.style.transform = `translateY(${y * 0.3}px) scale(1.2)`; if(mid) mid.style.transform = `translateX(-50%) translateY(${y * 0.6}px)`; });}

AI PROMPT

パララックススクロールを作って。背景画像はscrollY*0.3でゆっくり動き、中景テキストはscrollY*0.6で中速、前景は固定。コンテナoverflow-y:scroll, height:固定、複数レイヤーをposition:fixed/absoluteで重ねる。scrollイベントでtransform:translateYを動的更新。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。