行フォーカス読書エフェクト

<div class="d02-08-02-stage">
          <span class="d02-08-02-hint">↓ scroll</span>
          <div class="d02-08-02-scroll">
            <div class="d02-08-02-pad-top"></div>
            <p class="d02-08-02-line">スクロールするたびに、視線の先だけがくっきり浮かび上がる。</p>
            <p class="d02-08-02-line">前後の行はやわらかくぼやけて、意識の外側へ退いていく。</p>
            <p class="d02-08-02-line">まるで本を指でなぞるように、読む場所だけに光が当たる。</p>
            <p class="d02-08-02-line">長い記事でも、迷わず読み進められる感覚を作り出せます。</p>
            <p class="d02-08-02-line">採用ページやブランドストーリーの没入感を高める演出です。</p>
            <div class="d02-08-02-pad-bottom"></div>
          </div>
        </div>

.prev.d02-08-02{padding:0;display:block}
        .d02-08-02-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc}
        .d02-08-02-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:#94a3b8;pointer-events:none;z-index:2}
        .d02-08-02-scroll{position:absolute;inset:0;overflow-y:auto;padding:0 26px}
        .d02-08-02-pad-top{height:70px}
        .d02-08-02-pad-bottom{height:120px}
        .d02-08-02-line{
          margin:0 0 30px;font-size:15px;line-height:1.9;color:#1a2333;
          opacity:.2;filter:blur(3px);transform:scale(.96);
          will-change:opacity,filter,transform;
        }

(function(){
        var stage = document.querySelector('#item-02-08-02 .d02-08-02-stage');
        var scroller = document.querySelector('#item-02-08-02 .d02-08-02-scroll');
        if(!stage || !scroller) return;
        var lines = scroller.querySelectorAll('.d02-08-02-line');
        function update(){
          var stageRect = stage.getBoundingClientRect();
          var centerY = stageRect.top + stageRect.height / 2;
          for(var i = 0; i < lines.length; i++){
            var rect = lines[i].getBoundingClientRect();
            var lineCenter = rect.top + rect.height / 2;
            var dist = Math.abs(lineCenter - centerY);
            var norm = 1 - dist / (stageRect.height * 0.62);
            norm = Math.min(Math.max(norm, 0), 1);
            lines[i].style.opacity = (0.18 + norm * 0.82).toFixed(2);
            lines[i].style.filter = 'blur(' + ((1 - norm) * 3.2).toFixed(1) + 'px)';
            lines[i].style.transform = 'scale(' + (0.96 + norm * 0.04).toFixed(3) + ')';
          }
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();