波打ち際レイヤードパララックス

<div class="view08-12-12">
          <div class="waveA08-12-12"></div>
          <div class="waveB08-12-12"></div>
          <div class="boat08-12-12">⛵</div>
          <div class="scr08-12-12">
            <div class="sp08-12-12">
              <span class="hint08-12-12">↓ 枠内をスクロール<br>波と船が異なる速度で左右に動きます</span>
            </div>
          </div>
        </div>

.d08-12-12{background:#0c4a6e;align-items:stretch;}
        .d08-12-12 .view08-12-12{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(180deg,#38bdf8 0%,#0ea5e9 55%,#0369a1 100%);
        }
        .d08-12-12 .waveA08-12-12,.d08-12-12 .waveB08-12-12{
          position:absolute;left:-60px;right:-60px;bottom:0;height:70px;will-change:transform;
        }
        .d08-12-12 .waveA08-12-12{
          background:repeating-radial-gradient(ellipse 40px 20px at 20px 70px,rgba(255,255,255,.28) 0 8px,transparent 8px 40px);
          opacity:.6;
        }
        .d08-12-12 .waveB08-12-12{
          background:repeating-radial-gradient(ellipse 30px 16px at 10px 60px,rgba(255,255,255,.4) 0 6px,transparent 6px 32px);
          opacity:.8;height:46px;
        }
        .d08-12-12 .boat08-12-12{
          position:absolute;top:64px;left:44%;font-size:22px;will-change:transform;
          filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));
        }
        .d08-12-12 .scr08-12-12{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-12 .sp08-12-12{height:660px;padding:16px 18px 0;}
        .d08-12-12 .hint08-12-12{display:inline-block;font-size:11.5px;line-height:1.7;color:#f0f9ff;background:rgba(3,50,71,.55);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-12 .scr08-12-12');
        if(!scr)return;
        var a=document.querySelector('.d08-12-12 .waveA08-12-12');
        var b=document.querySelector('.d08-12-12 .waveB08-12-12');
        var boat=document.querySelector('.d08-12-12 .boat08-12-12');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          a.style.transform='translateX('+(-p*30)+'px)';
          b.style.transform='translateX('+(p*54)+'px)';
          boat.style.transform='translate('+(p*70)+'px,'+(-p*6)+'px)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();