テキスト逆走パララックス

<div class="view08-12-03">
          <div class="grid08-12-03"></div>
          <div class="txt08-12-03"><b>PARALLAX</b><span>背景とテキストが逆方向に動く</span></div>
          <div class="scr08-12-03">
            <div class="sp08-12-03">
              <span class="hint08-12-03">↓ 枠内をスクロール</span>
            </div>
          </div>
        </div>

.d08-12-03{background:#0f172a;align-items:stretch;}
        .d08-12-03 .view08-12-03{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:#0f172a;
          display:flex;align-items:center;justify-content:center;
        }
        .d08-12-03 .grid08-12-03{
          position:absolute;inset:-60px 0;will-change:transform;
          background-image:
            linear-gradient(rgba(99,102,241,.22) 1px,transparent 1px),
            linear-gradient(90deg,rgba(99,102,241,.22) 1px,transparent 1px);
          background-size:26px 26px;
        }
        .d08-12-03 .txt08-12-03{
          position:relative;text-align:center;will-change:transform;
        }
        .d08-12-03 .txt08-12-03 b{
          display:block;font-size:26px;letter-spacing:.14em;color:#fff;
          text-shadow:0 4px 18px rgba(99,102,241,.6);
        }
        .d08-12-03 .txt08-12-03 span{display:block;margin-top:8px;font-size:11.5px;color:#a5b4fc;letter-spacing:.05em;}
        .d08-12-03 .scr08-12-03{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-03 .sp08-12-03{height:660px;padding:16px 18px 0;}
        .d08-12-03 .hint08-12-03{display:inline-block;font-size:11.5px;color:#cbd5e1;background:rgba(15,23,42,.6);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-03 .scr08-12-03');
        if(!scr)return;
        var bg=document.querySelector('.d08-12-03 .grid08-12-03');
        var txt=document.querySelector('.d08-12-03 .txt08-12-03');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          bg.style.transform='translateY('+(p*46)+'px)';
          txt.style.transform='translateY('+(-p*46)+'px)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();