雲流れる空パララックス

<div class="view08-12-04">
          <div class="cloudA08-12-04"></div>
          <div class="cloudB08-12-04"></div>
          <div class="cloudC08-12-04"></div>
          <div class="scr08-12-04">
            <div class="sp08-12-04">
              <span class="hint08-12-04">↓ 枠内をスクロール<br>雲が段階的な速度で流れます</span>
            </div>
          </div>
        </div>

.d08-12-04{background:#bae6fd;align-items:stretch;}
        .d08-12-04 .view08-12-04{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(180deg,#38bdf8,#e0f2fe);
        }
        .d08-12-04 .cloudA08-12-04,.d08-12-04 .cloudB08-12-04,.d08-12-04 .cloudC08-12-04{
          position:absolute;top:0;bottom:0;left:-60px;right:-60px;will-change:transform;
        }
        .d08-12-04 .cloudA08-12-04{
          background:
            radial-gradient(circle 14px at 20% 25%,rgba(255,255,255,.6),transparent 70%),
            radial-gradient(circle 18px at 60% 18%,rgba(255,255,255,.55),transparent 70%),
            radial-gradient(circle 12px at 85% 30%,rgba(255,255,255,.5),transparent 70%);
        }
        .d08-12-04 .cloudB08-12-04{
          background:
            radial-gradient(circle 24px at 35% 45%,rgba(255,255,255,.75),transparent 70%),
            radial-gradient(circle 20px at 10% 55%,rgba(255,255,255,.7),transparent 70%),
            radial-gradient(circle 26px at 75% 50%,rgba(255,255,255,.7),transparent 70%);
        }
        .d08-12-04 .cloudC08-12-04{
          background:
            radial-gradient(circle 34px at 25% 78%,rgba(255,255,255,.9),transparent 70%),
            radial-gradient(circle 30px at 68% 82%,rgba(255,255,255,.85),transparent 70%);
        }
        .d08-12-04 .scr08-12-04{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-04 .sp08-12-04{height:660px;padding:16px 18px 0;}
        .d08-12-04 .hint08-12-04{display:inline-block;font-size:11.5px;line-height:1.7;color:#075985;background:rgba(255,255,255,.7);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-04 .scr08-12-04');
        if(!scr)return;
        var a=document.querySelector('.d08-12-04 .cloudA08-12-04');
        var b=document.querySelector('.d08-12-04 .cloudB08-12-04');
        var c=document.querySelector('.d08-12-04 .cloudC08-12-04');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          a.style.transform='translateX('+(p*18)+'px)';
          b.style.transform='translateX('+(-p*40)+'px)';
          c.style.transform='translateX('+(p*68)+'px)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();