歩行コマ送りキャラクタースクラブ

<div class="view08-16-03">
          <div class="track08-16-03"></div>
          <div class="char08-16-03">
            <div class="head08-16-03"></div>
            <div class="torso08-16-03"></div>
            <div class="armL08-16-03"></div>
            <div class="armR08-16-03"></div>
            <div class="legL08-16-03"></div>
            <div class="legR08-16-03"></div>
          </div>
          <div class="scr08-16-03">
            <div class="sp08-16-03">
              <span class="hint08-16-03">↓ 枠内をスクロール<br>スクロール量がキャラクターの歩数と位置になります</span>
            </div>
          </div>
        </div>

.d08-16-03{background:#fefce8;align-items:stretch;}
        .d08-16-03 .view08-16-03{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:linear-gradient(180deg,#fef9c3,#fef3c7);
        }
        .d08-16-03 .track08-16-03{position:absolute;left:14px;right:14px;bottom:46px;height:3px;background:rgba(120,53,15,.25);border-radius:2px;}
        .d08-16-03 .char08-16-03{position:absolute;left:14px;bottom:48px;width:34px;height:64px;will-change:transform;}
        .d08-16-03 .head08-16-03{position:absolute;left:9px;top:0;width:16px;height:16px;border-radius:50%;background:#c2410c;}
        .d08-16-03 .torso08-16-03{position:absolute;left:11px;top:16px;width:12px;height:26px;border-radius:6px;background:#ea580c;}
        .d08-16-03 .armL08-16-03,.d08-16-03 .armR08-16-03{position:absolute;top:18px;left:17px;width:4px;height:20px;border-radius:2px;background:#c2410c;transform-origin:top center;will-change:transform;}
        .d08-16-03 .legL08-16-03,.d08-16-03 .legR08-16-03{position:absolute;top:40px;left:17px;width:4px;height:22px;border-radius:2px;background:#7c2d12;transform-origin:top center;will-change:transform;}
        .d08-16-03 .scr08-16-03{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-03 .sp08-16-03{height:900px;padding:16px 18px 0;}
        .d08-16-03 .hint08-16-03{display:inline-block;font-size:11.5px;line-height:1.7;color:#78350f;background:rgba(255,255,255,.75);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-03 .scr08-16-03');
        if(!scr)return;
        var view=document.querySelector('.d08-16-03 .view08-16-03');
        var char=document.querySelector('.d08-16-03 .char08-16-03');
        var legL=document.querySelector('.d08-16-03 .legL08-16-03');
        var legR=document.querySelector('.d08-16-03 .legR08-16-03');
        var armL=document.querySelector('.d08-16-03 .armL08-16-03');
        var armR=document.querySelector('.d08-16-03 .armR08-16-03');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          var trackWidth=view.clientWidth-28-34;
          char.style.transform='translateX('+(p*Math.max(trackWidth,0))+'px)';
          var frame=Math.floor(p*24)%2;
          var bounce=frame===0?-3:0;
          char.style.marginTop=bounce+'px';
          var ang=frame===0?26:-26;
          legL.style.transform='rotate('+ang+'deg)';
          legR.style.transform='rotate('+(-ang)+'deg)';
          armL.style.transform='rotate('+(-ang)+'deg)';
          armR.style.transform='rotate('+ang+'deg)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();