スクロールグラデーション見出し

<div class="d02-08-04-stage">
          <span class="d02-08-04-hint">↓ scroll</span>
          <div class="d02-08-04-scroll">
            <h4 class="d02-08-04-head">未来を、<br>加速させる。</h4>
            <div class="d02-08-04-body">
              <p>見出しの色が、スクロール量に正確に比例して流れます。時間経過ではなく操作量で動くので、触っている実感がそのまま演出になります。</p>
              <div class="d02-08-04-block"></div>
              <div class="d02-08-04-block"></div>
            </div>
          </div>
        </div>

.prev.d02-08-04{padding:0;display:block}
        .d02-08-04-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#0f1222}
        .d02-08-04-hint{position:absolute;top:10px;right:14px;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.4);pointer-events:none;z-index:3}
        .d02-08-04-scroll{position:absolute;inset:0;overflow-y:auto}
        .d02-08-04-head{
          position:sticky;top:0;z-index:2;margin:0;padding:64px 24px 20px;
          font-size:28px;font-weight:800;line-height:1.35;background:#0f1222;
          background-image:linear-gradient(90deg,#38bdf8,#a78bfa,#f472b6,#38bdf8);
          background-size:400% 100%;background-position:0% 50%;
          -webkit-background-clip:text;background-clip:text;
          -webkit-text-fill-color:transparent;color:transparent;
        }
        .d02-08-04-body{padding:10px 24px 140px}
        .d02-08-04-body p{color:rgba(255,255,255,.65);font-size:12.5px;line-height:1.9;margin:0 0 16px}
        .d02-08-04-block{height:70px;border-radius:10px;margin-bottom:14px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}

(function(){
        var scroller = document.querySelector('#item-02-08-04 .d02-08-04-scroll');
        var head = document.querySelector('#item-02-08-04 .d02-08-04-head');
        if(!scroller || !head) return;
        function update(){
          var max = scroller.scrollHeight - scroller.clientHeight;
          var progress = max > 0 ? Math.min(Math.max(scroller.scrollTop / max, 0), 1) : 0;
          head.style.backgroundPosition = (progress * 300) + '% 50%';
        }
        scroller.addEventListener('scroll', update, {passive:true});
        update();
      })();