パーツ組み立てイラストスクラブ

<div class="view08-16-02">
          <div class="rocket08-16-02">
            <div class="rp08-16-02 nose08-16-02"></div>
            <div class="rp08-16-02 body08-16-02"></div>
            <div class="rp08-16-02 finl08-16-02"></div>
            <div class="rp08-16-02 finr08-16-02"></div>
            <div class="rp08-16-02 win08-16-02"></div>
          </div>
          <div class="scr08-16-02">
            <div class="sp08-16-02">
              <span class="hint08-16-02">↓ 枠内をスクロール<br>スクロール量に応じてロケットのパーツが組み上がります</span>
            </div>
          </div>
        </div>

.d08-16-02{background:#f8fafc;align-items:stretch;}
        .d08-16-02 .view08-16-02{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(160deg,#eef2ff,#e0f2fe);
        }
        .d08-16-02 .rocket08-16-02{position:absolute;left:50%;top:50%;width:120px;height:150px;margin:-75px 0 0 -60px;}
        .d08-16-02 .rp08-16-02{position:absolute;will-change:transform,opacity;}
        .d08-16-02 .body08-16-02{left:50%;top:40px;width:26px;height:70px;margin-left:-13px;border-radius:13px 13px 6px 6px;background:linear-gradient(180deg,#e2e8f0,#94a3b8);}
        .d08-16-02 .nose08-16-02{left:50%;top:6px;width:0;height:0;margin-left:-15px;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:34px solid #f87171;}
        .d08-16-02 .finl08-16-02{left:50%;top:96px;width:0;height:0;margin-left:-34px;border-top:22px solid transparent;border-right:20px solid #38bdf8;}
        .d08-16-02 .finr08-16-02{left:50%;top:96px;width:0;height:0;margin-left:14px;border-top:22px solid transparent;border-left:20px solid #38bdf8;}
        .d08-16-02 .win08-16-02{left:50%;top:56px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle,#e0f2fe,#0284c7);}
        .d08-16-02 .scr08-16-02{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-02 .sp08-16-02{height:900px;padding:16px 18px 0;}
        .d08-16-02 .hint08-16-02{display:inline-block;font-size:11.5px;line-height:1.7;color:#334155;background:rgba(255,255,255,.8);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-02 .scr08-16-02');
        if(!scr)return;
        var parts=[
          {el:document.querySelector('.d08-16-02 .nose08-16-02'),dx:-70,dy:-55,rot:-140},
          {el:document.querySelector('.d08-16-02 .body08-16-02'),dx:65,dy:35,rot:90},
          {el:document.querySelector('.d08-16-02 .finl08-16-02'),dx:-85,dy:60,rot:160},
          {el:document.querySelector('.d08-16-02 .finr08-16-02'),dx:85,dy:-35,rot:-160},
          {el:document.querySelector('.d08-16-02 .win08-16-02'),dx:-45,dy:80,rot:200}
        ];
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          var q=1-p;
          parts.forEach(function(item){
            item.el.style.transform='translate('+(item.dx*q)+'px,'+(item.dy*q)+'px) rotate('+(item.rot*q)+'deg)';
            item.el.style.opacity=(0.25+0.75*p).toFixed(2);
          });
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();