カラーブロブ浮遊パララックス

<div class="view08-12-09">
          <div class="blA08-12-09"></div>
          <div class="blB08-12-09"></div>
          <div class="blC08-12-09"></div>
          <div class="scr08-12-09">
            <div class="sp08-12-09">
              <span class="hint08-12-09">↓ 枠内をスクロール<br>カラーブロブが3速度で浮遊します</span>
            </div>
          </div>
        </div>

.d08-12-09{background:#fff7ed;align-items:stretch;}
        .d08-12-09 .view08-12-09{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(160deg,#fff7ed,#fef2f2);
        }
        .d08-12-09 .blA08-12-09,.d08-12-09 .blB08-12-09,.d08-12-09 .blC08-12-09{position:absolute;will-change:transform;
          border-radius:60% 40% 55% 45% / 45% 55% 40% 60%;}
        .d08-12-09 .blA08-12-09{
          top:14px;left:20px;width:70px;height:56px;
          background:linear-gradient(135deg,#fed7aa,#fca5a5);opacity:.7;
        }
        .d08-12-09 .blB08-12-09{
          bottom:24px;right:26px;width:88px;height:66px;
          background:linear-gradient(135deg,#bbf7d0,#93c5fd);opacity:.75;
        }
        .d08-12-09 .blC08-12-09{
          top:70px;right:70px;width:52px;height:44px;
          background:linear-gradient(135deg,#fde68a,#f9a8d4);opacity:.85;
        }
        .d08-12-09 .scr08-12-09{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-09 .sp08-12-09{height:660px;padding:16px 18px 0;}
        .d08-12-09 .hint08-12-09{display:inline-block;font-size:11.5px;line-height:1.7;color:#7c2d12;background:rgba(255,255,255,.75);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-09 .scr08-12-09');
        if(!scr)return;
        var a=document.querySelector('.d08-12-09 .blA08-12-09');
        var b=document.querySelector('.d08-12-09 .blB08-12-09');
        var c=document.querySelector('.d08-12-09 .blC08-12-09');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          a.style.transform='translateY('+(-p*20)+'px) rotate('+(p*18)+'deg)';
          b.style.transform='translateY('+(-p*50)+'px) rotate('+(-p*24)+'deg)';
          c.style.transform='translateY('+(-p*85)+'px) rotate('+(p*30)+'deg)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();