浮遊サークル多重パララックス

<div class="view08-12-02">
          <div class="cfar08-12-02"></div>
          <div class="cmid08-12-02"></div>
          <div class="cnear08-12-02"></div>
          <div class="scr08-12-02">
            <div class="sp08-12-02">
              <span class="hint08-12-02">↓ 枠内をスクロール<br>円が3つの速度で浮遊します</span>
            </div>
          </div>
        </div>

.d08-12-02{background:#1e1b4b;align-items:stretch;}
        .d08-12-02 .view08-12-02{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:radial-gradient(circle at 30% 15%,#312e81,#1e1b4b 70%);
        }
        .d08-12-02 .cfar08-12-02,.d08-12-02 .cmid08-12-02,.d08-12-02 .cnear08-12-02{
          position:absolute;inset:-40px 0 -40px 0;will-change:transform;
        }
        .d08-12-02 .cfar08-12-02{
          background:
            radial-gradient(circle 16px at 15% 20%,rgba(199,210,254,.35),transparent 70%),
            radial-gradient(circle 12px at 75% 30%,rgba(199,210,254,.3),transparent 70%),
            radial-gradient(circle 18px at 55% 70%,rgba(199,210,254,.28),transparent 70%);
        }
        .d08-12-02 .cmid08-12-02{
          background:
            radial-gradient(circle 26px at 25% 55%,rgba(129,140,248,.5),transparent 70%),
            radial-gradient(circle 20px at 82% 65%,rgba(244,114,182,.4),transparent 70%),
            radial-gradient(circle 22px at 60% 20%,rgba(45,212,191,.35),transparent 70%);
        }
        .d08-12-02 .cnear08-12-02{
          background:
            radial-gradient(circle 36px at 20% 75%,rgba(251,191,36,.55),transparent 70%),
            radial-gradient(circle 30px at 78% 25%,rgba(236,72,153,.55),transparent 70%),
            radial-gradient(circle 34px at 50% 55%,rgba(56,189,248,.5),transparent 70%);
        }
        .d08-12-02 .scr08-12-02{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-02 .sp08-12-02{height:660px;padding:16px 18px 0;}
        .d08-12-02 .hint08-12-02{display:inline-block;font-size:11.5px;line-height:1.7;color:#e0e7ff;background:rgba(15,23,42,.5);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-02 .scr08-12-02');
        if(!scr)return;
        var far=document.querySelector('.d08-12-02 .cfar08-12-02');
        var mid=document.querySelector('.d08-12-02 .cmid08-12-02');
        var near=document.querySelector('.d08-12-02 .cnear08-12-02');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          far.style.transform='translateY('+(-p*15)+'px)';
          mid.style.transform='translateY('+(-p*45)+'px)';
          near.style.transform='translateY('+(-p*85)+'px)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();