DEMO
CODE
<div class="demo-stage" style="padding:0"><div class="ss-wrap"><div class="ss-section" style="background:#E91B89;color:#fff">SECTION 1<br><small style="font-size:.6em;opacity:.7">scroll down</small></div><div class="ss-section" style="background:#1A1A1A;color:#fff">SECTION 2<br><small style="font-size:.6em;opacity:.7">keep scrolling</small></div><div class="ss-section" style="background:#7B37A8;color:#fff">SECTION 3<br><small style="font-size:.6em;opacity:.7">last one</small></div></div></div>
.ss-wrap { height:280px; overflow-y:scroll; }
.ss-section { position:sticky; top:0; height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:2rem; letter-spacing:.2em; }
AI PROMPT
Sticky Sectionsレイアウト。各セクションをposition:sticky+top:0+height:100vhにすると、スクロールで次々張り付きながら押し出される。CSSのみで完結、JS不要。コンテナはoverflow-y:scrollで縦スクロール領域を作る。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
セクションがスクロールに合わせて画面上部に張り付き、次のセクションに押し出される効果。LP・ストーリーサイトに。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
縦長LP・記事・ストーリーテリング型ページなど、読み進めに合わせた登場演出に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。