読了インジケータ連動テキスト

<div class="d02-08-07-stage">
          <div class="d02-08-07-rail"><span class="d02-08-07-fill"></span></div>
          <span class="d02-08-07-pct">0%</span>
          <div class="d02-08-07-scroll">
            <div class="d02-08-07-pad-top"></div>
            <p class="d02-08-07-p">この記事は読み進めるほど、文字が濃くはっきりと変化します。</p>
            <p class="d02-08-07-p">左のゲージが現在の読了位置をリアルタイムに示します。</p>
            <p class="d02-08-07-p">長文コンテンツで、読者に進捗を意識させたいときに有効です。</p>
            <p class="d02-08-07-p">最後まで読み切ると、ゲージも文字色も完全に満たされます。</p>
            <div class="d02-08-07-pad-bottom"></div>
          </div>
        </div>

.prev.d02-08-07{padding:0;display:block}
        .d02-08-07-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d02-08-07-rail{
          position:absolute;left:14px;top:18px;bottom:18px;width:4px;
          background:#e2e8f0;border-radius:2px;overflow:hidden;z-index:2;
        }
        .d02-08-07-fill{
          position:absolute;left:0;bottom:0;width:100%;height:0%;
          background:linear-gradient(180deg,#06b6d4,#2563eb);border-radius:2px;
        }
        .d02-08-07-pct{
          position:absolute;top:10px;right:14px;font-size:11px;font-weight:700;
          color:#2563eb;z-index:2;font-variant-numeric:tabular-nums;
        }
        .d02-08-07-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 24px 0 34px}
        .d02-08-07-pad-top{height:30px}
        .d02-08-07-pad-bottom{height:120px}
        .d02-08-07-p{margin:0 0 20px;font-size:14.5px;line-height:1.9;color:#cbd5e1;transition:color .05s linear}

(function(){
        var scroller = document.querySelector('#item-02-08-07 .d02-08-07-scroll');
        var fill = document.querySelector('#item-02-08-07 .d02-08-07-fill');
        var pct = document.querySelector('#item-02-08-07 .d02-08-07-pct');
        var paras = document.querySelectorAll('#item-02-08-07 .d02-08-07-p');
        if(!scroller || !fill || !pct) return;
        function mix(c1, c2, t){
          return [
            Math.round(c1[0] + (c2[0] - c1[0]) * t),
            Math.round(c1[1] + (c2[1] - c1[1]) * t),
            Math.round(c1[2] + (c2[2] - c1[2]) * t)
          ];
        }
        var from = [203, 213, 225];
        var to = [26, 35, 51];
        function update(){
          var max = scroller.scrollHeight - scroller.clientHeight;
          var progress = max > 0 ? Math.min(Math.max(scroller.scrollTop / max, 0), 1) : 0;
          fill.style.height = (progress * 100).toFixed(0) + '%';
          pct.textContent = Math.round(progress * 100) + '%';
          var c = mix(from, to, progress);
          var color = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')';
          for(var i = 0; i < paras.length; i++){ paras[i].style.color = color; }
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();