カード積層奥行きパララックス

<div class="view08-12-10">
          <div class="ckC08-12-10"><span>03</span></div>
          <div class="ckB08-12-10"><span>02</span></div>
          <div class="ckA08-12-10"><span>01</span></div>
          <div class="scr08-12-10">
            <div class="sp08-12-10">
              <span class="hint08-12-10">↓ 枠内をスクロール<br>手前のカードほど速く離れていきます</span>
            </div>
          </div>
        </div>

.d08-12-10{background:#f1f5f9;align-items:stretch;}
        .d08-12-10 .view08-12-10{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(160deg,#f1f5f9,#e2e8f0);
          display:flex;align-items:center;justify-content:center;
        }
        .d08-12-10 .ckA08-12-10,.d08-12-10 .ckB08-12-10,.d08-12-10 .ckC08-12-10{
          position:absolute;width:120px;height:78px;border-radius:14px;will-change:transform;
          display:flex;align-items:flex-end;justify-content:flex-start;padding:10px;
        }
        .d08-12-10 .ckA08-12-10 span,.d08-12-10 .ckB08-12-10 span,.d08-12-10 .ckC08-12-10 span{
          font-size:12px;font-weight:700;color:#fff;letter-spacing:.06em;
        }
        .d08-12-10 .ckC08-12-10{background:linear-gradient(135deg,#94a3b8,#64748b);box-shadow:0 8px 18px rgba(30,41,59,.18);}
        .d08-12-10 .ckB08-12-10{background:linear-gradient(135deg,#818cf8,#6366f1);box-shadow:0 12px 24px rgba(30,41,59,.22);}
        .d08-12-10 .ckA08-12-10{background:linear-gradient(135deg,#38bdf8,#0ea5e9);box-shadow:0 16px 32px rgba(30,41,59,.3);}
        .d08-12-10 .scr08-12-10{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-10 .sp08-12-10{height:660px;padding:16px 18px 0;}
        .d08-12-10 .hint08-12-10{display:inline-block;font-size:11.5px;line-height:1.7;color:#334155;background:rgba(255,255,255,.8);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-10 .scr08-12-10');
        if(!scr)return;
        var a=document.querySelector('.d08-12-10 .ckA08-12-10');
        var b=document.querySelector('.d08-12-10 .ckB08-12-10');
        var c=document.querySelector('.d08-12-10 .ckC08-12-10');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          c.style.transform='translate('+(-p*8)+'px,'+(-p*10)+'px)';
          b.style.transform='translate('+(p*20)+'px,'+(-p*34)+'px)';
          a.style.transform='translate('+(-p*42)+'px,'+(-p*66)+'px)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();