ドットグリッド波打ちパララックス

<div class="view08-12-08">
          <div class="gdA08-12-08"></div>
          <div class="gdB08-12-08"></div>
          <div class="gdC08-12-08"></div>
          <div class="scr08-12-08">
            <div class="sp08-12-08">
              <span class="hint08-12-08">↓ 枠内をスクロール<br>3枚のドットグリッドが波打ちます</span>
            </div>
          </div>
        </div>

.d08-12-08{background:#020617;align-items:stretch;}
        .d08-12-08 .view08-12-08{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:#020617;
        }
        .d08-12-08 .gdA08-12-08,.d08-12-08 .gdB08-12-08,.d08-12-08 .gdC08-12-08{
          position:absolute;inset:-30px;will-change:transform;background-size:24px 24px;
        }
        .d08-12-08 .gdA08-12-08{
          background-image:radial-gradient(rgba(56,189,248,.35) 1.4px,transparent 1.6px);
          opacity:.6;
        }
        .d08-12-08 .gdB08-12-08{
          background-image:radial-gradient(rgba(192,132,252,.45) 1.6px,transparent 1.8px);
          background-position:8px 8px;opacity:.7;
        }
        .d08-12-08 .gdC08-12-08{
          background-image:radial-gradient(rgba(244,114,182,.55) 1.8px,transparent 2px);
          background-position:16px 4px;opacity:.8;
        }
        .d08-12-08 .scr08-12-08{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-08 .sp08-12-08{height:660px;padding:16px 18px 0;}
        .d08-12-08 .hint08-12-08{display:inline-block;font-size:11.5px;line-height:1.7;color:#e0f2fe;background:rgba(2,6,23,.6);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-08 .scr08-12-08');
        if(!scr)return;
        var a=document.querySelector('.d08-12-08 .gdA08-12-08');
        var b=document.querySelector('.d08-12-08 .gdB08-12-08');
        var c=document.querySelector('.d08-12-08 .gdC08-12-08');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          a.style.transform='translate('+(p*8)+'px,'+(-p*16)+'px)';
          b.style.transform='translate('+(-p*14)+'px,'+(-p*40)+'px)';
          c.style.transform='translate('+(p*20)+'px,'+(-p*72)+'px)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();