幾何学図形マルチスピードパララックス

<div class="view08-12-06">
          <div class="shC08-12-06"></div>
          <div class="shSq08-12-06"></div>
          <div class="shTri08-12-06"></div>
          <div class="shHex08-12-06"></div>
          <div class="scr08-12-06">
            <div class="sp08-12-06">
              <span class="hint08-12-06">↓ 枠内をスクロール<br>4つの図形がそれぞれ違う方向へ</span>
            </div>
          </div>
        </div>

.d08-12-06{background:#fdf4ff;align-items:stretch;}
        .d08-12-06 .view08-12-06{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(135deg,#fdf4ff,#f5f3ff);
        }
        .d08-12-06 .shC08-12-06,.d08-12-06 .shSq08-12-06,.d08-12-06 .shTri08-12-06,.d08-12-06 .shHex08-12-06{position:absolute;will-change:transform;}
        .d08-12-06 .shC08-12-06{
          top:22px;left:24px;width:46px;height:46px;border-radius:50%;
          background:linear-gradient(135deg,#c084fc,#a855f7);opacity:.85;
        }
        .d08-12-06 .shSq08-12-06{
          top:34px;right:40px;width:36px;height:36px;
          background:linear-gradient(135deg,#38bdf8,#0ea5e9);border-radius:8px;
          transform:rotate(20deg);opacity:.85;
        }
        .d08-12-06 .shTri08-12-06{
          bottom:30px;left:60px;width:0;height:0;
          border-left:26px solid transparent;border-right:26px solid transparent;
          border-bottom:44px solid #f472b6;opacity:.85;
        }
        .d08-12-06 .shHex08-12-06{
          bottom:26px;right:54px;width:44px;height:44px;background:#34d399;opacity:.85;
          clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);
        }
        .d08-12-06 .scr08-12-06{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-06 .sp08-12-06{height:660px;padding:16px 18px 0;}
        .d08-12-06 .hint08-12-06{display:inline-block;font-size:11.5px;line-height:1.7;color:#581c87;background:rgba(255,255,255,.75);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-06 .scr08-12-06');
        if(!scr)return;
        var c=document.querySelector('.d08-12-06 .shC08-12-06');
        var sq=document.querySelector('.d08-12-06 .shSq08-12-06');
        var tri=document.querySelector('.d08-12-06 .shTri08-12-06');
        var hex=document.querySelector('.d08-12-06 .shHex08-12-06');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          c.style.transform='translateY('+(p*60)+'px)';
          sq.style.transform='translateX('+(p*40)+'px) rotate('+(20+p*70)+'deg)';
          tri.style.transform='translateY('+(-p*54)+'px)';
          hex.style.transform='translateX('+(-p*46)+'px) rotate('+(-p*50)+'deg)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();