3層ランドスケープパララックス

<div class="view08-12-01">
          <div class="sun08-12-01"></div>
          <div class="far08-12-01"></div>
          <div class="mid08-12-01"></div>
          <div class="near08-12-01"></div>
          <div class="scr08-12-01">
            <div class="sp08-12-01">
              <span class="hint08-12-01">↓ 枠内をスクロールすると<br>山・丘・草地が違う速度で動きます</span>
            </div>
          </div>
        </div>

.d08-12-01{background:#e0f2fe;align-items:stretch;}
        .d08-12-01 .view08-12-01{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(180deg,#38bdf8 0%,#bae6fd 55%,#fef9c3 100%);
        }
        .d08-12-01 .sun08-12-01{
          position:absolute;top:22px;right:34px;width:38px;height:38px;border-radius:50%;
          background:radial-gradient(circle,#fff7cc,#fde047 60%,rgba(253,224,71,0));
          box-shadow:0 0 24px 6px rgba(253,224,71,.55);
        }
        .d08-12-01 .far08-12-01,.d08-12-01 .mid08-12-01,.d08-12-01 .near08-12-01{
          position:absolute;left:0;right:0;bottom:-6px;will-change:transform;
        }
        .d08-12-01 .far08-12-01{
          height:120px;background:#94a3b8;opacity:.55;
          clip-path:polygon(0% 70%,12% 40%,22% 58%,35% 25%,48% 55%,60% 30%,72% 52%,85% 20%,100% 45%,100% 100%,0% 100%);
        }
        .d08-12-01 .mid08-12-01{
          height:88px;background:#65a30d;opacity:.8;
          clip-path:polygon(0% 55%,20% 30%,40% 50%,60% 20%,80% 45%,100% 25%,100% 100%,0% 100%);
        }
        .d08-12-01 .near08-12-01{
          height:50px;background:#166534;
          clip-path:polygon(0% 60%,10% 30%,20% 55%,30% 20%,40% 50%,50% 15%,60% 48%,70% 25%,80% 55%,90% 30%,100% 50%,100% 100%,0% 100%);
        }
        .d08-12-01 .scr08-12-01{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-01 .sp08-12-01{height:660px;padding:16px 18px 0;}
        .d08-12-01 .hint08-12-01{display:inline-block;font-size:11.5px;line-height:1.7;color:#0c4a6e;background:rgba(255,255,255,.72);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-01 .scr08-12-01');
        if(!scr)return;
        var far=document.querySelector('.d08-12-01 .far08-12-01');
        var mid=document.querySelector('.d08-12-01 .mid08-12-01');
        var near=document.querySelector('.d08-12-01 .near08-12-01');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          far.style.transform='translateY('+(-p*12)+'px)';
          mid.style.transform='translateY('+(-p*34)+'px)';
          near.style.transform='translateY('+(-p*70)+'px)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();