パララックス背景セクション

<div class="view08-01-06">
          <div class="bg08-01-06"></div>
          <div class="scr08-01-06">
            <section class="sec08-01-06"><h5>PARALLAX</h5><p>↓ 枠内をスクロール</p></section>
            <section class="sec08-01-06 pane08-01-06"><p>背景の円が前景より<br>ゆっくり動きます</p></section>
            <section class="sec08-01-06 pane08-01-06"><p>奥行きが生まれて<br>ページに立体感が出ます</p></section>
          </div>
        </div>

.d08-01-06{background:#1e1b4b;align-items:stretch;}
        .d08-01-06 .view08-01-06{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:#312e81;
        }
        .d08-01-06 .bg08-01-06{
          position:absolute;left:0;top:0;width:100%;height:200%;will-change:transform;
          background:
            radial-gradient(circle 60px at 20% 15%,rgba(129,140,248,.7),transparent 70%),
            radial-gradient(circle 90px at 80% 35%,rgba(244,114,182,.5),transparent 70%),
            radial-gradient(circle 70px at 35% 60%,rgba(45,212,191,.5),transparent 70%),
            radial-gradient(circle 100px at 75% 85%,rgba(251,191,36,.45),transparent 70%),
            linear-gradient(180deg,#312e81,#1e1b4b);
        }
        .d08-01-06 .scr08-01-06{position:absolute;inset:0;overflow-y:auto;}
        .d08-01-06 .sec08-01-06{
          height:212px;display:flex;flex-direction:column;align-items:center;
          justify-content:center;text-align:center;color:#e0e7ff;
        }
        .d08-01-06 .sec08-01-06 h5{margin:0 0 6px;font-size:18px;letter-spacing:.3em;}
        .d08-01-06 .sec08-01-06 p{margin:0;font-size:12px;line-height:1.9;opacity:.85;}
        .d08-01-06 .pane08-01-06 p{
          background:rgba(15,23,42,.55);padding:14px 20px;border-radius:10px;
          border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(2px);
        }

(function(){
        var scr=document.querySelector('.d08-01-06 .scr08-01-06');
        var bg=document.querySelector('.d08-01-06 .bg08-01-06');
        if(!scr||!bg)return;
        scr.addEventListener('scroll',function(){
          bg.style.transform='translateY('+(-scr.scrollTop*0.35)+'px)';
        },{passive:true});
      })();