文字追従リーディングハイライト

<div class="d02-08-01-stage">
          <span class="d02-08-01-hint">↓ scroll</span>
          <div class="d02-08-01-scroll">
            <div class="d02-08-01-pad-top"></div>
            <p class="d02-08-01-text">スクロールに合わせて、この文章は一文字ずつ色づいていきます。読み進める速度がそのまま体験になる、没入感のあるテキスト表現です。ブログ本文や特集記事に活用すれば、読者の視線を自然に文章へ引き込むことができます。</p>
            <div class="d02-08-01-pad-bottom"></div>
          </div>
        </div>

.prev.d02-08-01{padding:0;display:block}
        .d02-08-01-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d02-08-01-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:#94a3b8;pointer-events:none;z-index:2}
        .d02-08-01-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 24px}
        .d02-08-01-pad-top{height:60px}
        .d02-08-01-pad-bottom{height:200px}
        .d02-08-01-text{margin:0;font-size:15px;line-height:2.05;letter-spacing:.02em}
        .d02-08-01-text .ch{color:#cbd5e1;transition:color .1s linear}
        .d02-08-01-text .ch.on{color:#1a2333}
        .d02-08-01-text .ch.active{
          color:#1a2333;
          background-image:linear-gradient(transparent 58%, #ffe94d 58%, #ffe94d 88%, transparent 88%);
        }

(function(){
        var root = document.querySelector('#item-02-08-01 .d02-08-01-text');
        var scroller = document.querySelector('#item-02-08-01 .d02-08-01-scroll');
        if(!root || !scroller) return;
        var text = root.textContent;
        root.textContent = '';
        var chars = [];
        for(var i = 0; i < text.length; i++){
          var s = document.createElement('span');
          s.className = 'ch';
          s.textContent = text[i];
          root.appendChild(s);
          chars.push(s);
        }
        function update(){
          var max = scroller.scrollHeight - scroller.clientHeight;
          var progress = max > 0 ? Math.min(Math.max(scroller.scrollTop / max, 0), 1) : 0;
          var idx = Math.floor(progress * chars.length);
          for(var i = 0; i < chars.length; i++){
            var c = chars[i];
            if(i < idx - 8){ c.className = 'ch on'; }
            else if(i < idx){ c.className = 'ch on active'; }
            else{ c.className = 'ch'; }
          }
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();