ロゴ分解・組み立てスクラブ

<div class="view08-16-08">
          <div class="logo08-16-08">
            <div class="lp08-16-08 top08-16-08"></div>
            <div class="lp08-16-08 right08-16-08"></div>
            <div class="lp08-16-08 bottom08-16-08"></div>
            <div class="lp08-16-08 left08-16-08"></div>
            <div class="core08-16-08"></div>
          </div>
          <div class="scr08-16-08">
            <div class="sp08-16-08">
              <span class="hint08-16-08">↓ 枠内をスクロール<br>スクロール量に応じてロゴが分解・組み立てされます</span>
            </div>
          </div>
        </div>

.d08-16-08{background:#111827;align-items:stretch;}
        .d08-16-08 .view08-16-08{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:radial-gradient(circle at 50% 45%,#1f2937,#0b0f17 75%);
          display:flex;align-items:center;justify-content:center;
        }
        .d08-16-08 .logo08-16-08{position:relative;width:100px;height:100px;}
        .d08-16-08 .lp08-16-08{position:absolute;left:50%;top:50%;width:0;height:0;margin:-25px 0 0 -25px;will-change:transform,opacity;}
        .d08-16-08 .top08-16-08{border-left:25px solid transparent;border-right:25px solid transparent;border-bottom:25px solid #38bdf8;}
        .d08-16-08 .right08-16-08{margin-top:0;border-top:25px solid transparent;border-bottom:25px solid transparent;border-left:25px solid #f472b6;}
        .d08-16-08 .bottom08-16-08{margin-top:25px;border-left:25px solid transparent;border-right:25px solid transparent;border-top:25px solid #a855f7;}
        .d08-16-08 .left08-16-08{margin-top:0;border-top:25px solid transparent;border-bottom:25px solid transparent;border-right:25px solid #34d399;}
        .d08-16-08 .core08-16-08{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;opacity:0;will-change:opacity,transform;}
        .d08-16-08 .scr08-16-08{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-08 .sp08-16-08{height:900px;padding:16px 18px 0;}
        .d08-16-08 .hint08-16-08{display:inline-block;font-size:11.5px;line-height:1.7;color:#e5e7eb;background:rgba(17,24,39,.6);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-08 .scr08-16-08');
        if(!scr)return;
        var top=document.querySelector('.d08-16-08 .top08-16-08');
        var right=document.querySelector('.d08-16-08 .right08-16-08');
        var bottom=document.querySelector('.d08-16-08 .bottom08-16-08');
        var left=document.querySelector('.d08-16-08 .left08-16-08');
        var core=document.querySelector('.d08-16-08 .core08-16-08');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          var q=1-p;
          top.style.transform='translateY('+(-q*70)+'px) rotate('+(q*140)+'deg)';
          right.style.transform='translateX('+(q*70)+'px) rotate('+(-q*140)+'deg)';
          bottom.style.transform='translateY('+(q*70)+'px) rotate('+(q*140)+'deg)';
          left.style.transform='translateX('+(-q*70)+'px) rotate('+(-q*140)+'deg)';
          core.style.opacity=p.toFixed(2);
          core.style.transform='scale('+(0.4+0.6*p).toFixed(2)+')';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();