Scroll Progress Bar

CODE

HTML

<div class="demo-stage spb-stage"><div class="spb-bar"></div><span class="spb-label">ページをスクロールすると上部のバーが伸びます</span></div>

CSS

.spb-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:300px; }
.spb-bar { position:absolute; top:0; left:0; height:6px; width:0; background:linear-gradient(90deg,#e91b89,#7b37a8); transition:width .1s linear; }
.spb-label { color:rgba(255,255,255,.5); font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.8rem; text-align:center; }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .spb-bar {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

(function(){
  var bar = document.querySelector('.spb-bar');
  if(!bar) return;
  function upd(){
    var h = document.documentElement;
    var p = h.scrollTop / ((h.scrollHeight - h.clientHeight) || 1);
    bar.style.width = Math.min(p * 100, 100) + '%';
  }
  window.addEventListener('scroll', upd, { passive: true });
  upd();
})();

AI PROMPT

Claude Code Cursor v0

PROMPT

ページのスクロール量に応じて伸びる読了プログレスバーを作って。固定の細いバーを上部に置き、scrollイベントで scrollTop / (scrollHeight - clientHeight) を計算して width:%。passive:true でスクロール性能を確保。記事・長尺LPのUX向上に。

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

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

スクロールプログレスバー（Scroll Progress Bar）とは

ページのスクロール量に応じて上部のバーが伸びる読了プログレス。記事・長尺LPのUX向上に。この効果は主にJavaScriptでDOMを操作し、要素の位置やスタイルを動的に書き換えて実現します。

使いどころ

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

CSS実装のポイント

JavaScriptで座標やタイミングを計算しながら要素のstyleを書き換えます。更新はrequestAnimationFrameでブラウザの描画タイミングに同期させ、位置の変更はtransformで行うとレイアウト再計算を避けられて軽くなります。動きを減らす設定（prefers-reduced-motion）の利用者へは演出を控えめにする配慮も大切です。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。

FAQ

スクロールプログレスバー（Scroll Progress Bar）はどんな効果ですか？

ページのスクロール量に応じて上部のバーが伸びる読了プログレス。記事・長尺LPのUX向上に。縦長LP・記事・ストーリーテリング型ページなど、読み進めに合わせた登場演出に向く演出です。

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

見た目はCSSで作れますが、動きの制御にJavaScriptを併用します。本ページではHTML・CSS・JavaScriptのコードをまとめて掲載しています。

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

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

RELATED EFFECTS

スクロールプログレスバー（Scroll Progress Bar）とは

使いどころ

CSS実装のポイント

CSSとJavaScriptの違い

FAQ