山シルエット重なりパララックス

<div class="view08-12-07">
          <div class="sun08-12-07"></div>
          <div class="mA08-12-07"></div>
          <div class="mB08-12-07"></div>
          <div class="mC08-12-07"></div>
          <div class="mD08-12-07"></div>
          <div class="scr08-12-07">
            <div class="sp08-12-07">
              <span class="hint08-12-07">↓ 枠内をスクロール<br>4層の山シルエットが重なって動きます</span>
            </div>
          </div>
        </div>

.d08-12-07{background:#451a03;align-items:stretch;}
        .d08-12-07 .view08-12-07{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(180deg,#7c2d12 0%,#c2410c 40%,#fbbf24 72%,#fef3c7 100%);
        }
        .d08-12-07 .sun08-12-07{
          position:absolute;left:50%;top:70px;width:64px;height:64px;margin-left:-32px;
          border-radius:50%;background:radial-gradient(circle,#fff7cc,#fde047 55%,rgba(253,224,71,0));
          box-shadow:0 0 30px 8px rgba(253,224,71,.5);
        }
        .d08-12-07 .mA08-12-07,.d08-12-07 .mB08-12-07,.d08-12-07 .mC08-12-07,.d08-12-07 .mD08-12-07{
          position:absolute;left:0;right:0;bottom:-6px;will-change:transform;
        }
        .d08-12-07 .mA08-12-07{
          height:120px;background:#78350f;opacity:.45;
          clip-path:polygon(0% 65%,14% 35%,28% 55%,42% 20%,56% 48%,70% 25%,84% 50%,100% 30%,100% 100%,0% 100%);
        }
        .d08-12-07 .mB08-12-07{
          height:94px;background:#5b2308;opacity:.65;
          clip-path:polygon(0% 55%,18% 25%,34% 48%,50% 15%,66% 42%,82% 20%,100% 40%,100% 100%,0% 100%);
        }
        .d08-12-07 .mC08-12-07{
          height:68px;background:#3f1503;opacity:.85;
          clip-path:polygon(0% 60%,22% 20%,40% 45%,58% 10%,76% 40%,100% 22%,100% 100%,0% 100%);
        }
        .d08-12-07 .mD08-12-07{
          height:42px;background:#1c0a02;
          clip-path:polygon(0% 70%,20% 30%,38% 58%,55% 18%,72% 50%,88% 25%,100% 45%,100% 100%,0% 100%);
        }
        .d08-12-07 .scr08-12-07{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-07 .sp08-12-07{height:660px;padding:16px 18px 0;}
        .d08-12-07 .hint08-12-07{display:inline-block;font-size:11.5px;line-height:1.7;color:#fff7ed;background:rgba(28,10,2,.5);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-12-07 .scr08-12-07');
        if(!scr)return;
        var a=document.querySelector('.d08-12-07 .mA08-12-07');
        var b=document.querySelector('.d08-12-07 .mB08-12-07');
        var c=document.querySelector('.d08-12-07 .mC08-12-07');
        var d=document.querySelector('.d08-12-07 .mD08-12-07');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          a.style.transform='translateY('+(-p*10)+'px)';
          b.style.transform='translateY('+(-p*26)+'px)';
          c.style.transform='translateY('+(-p*48)+'px)';
          d.style.transform='translateY('+(-p*78)+'px)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();