コマ撮り風パラパラスクラブ

<div class="view08-16-10">
          <div class="reel08-16-10">
            <div class="frame08-16-10 fr08-16-10-0">1</div>
            <div class="frame08-16-10 fr08-16-10-1">2</div>
            <div class="frame08-16-10 fr08-16-10-2">3</div>
            <div class="frame08-16-10 fr08-16-10-3">4</div>
            <div class="frame08-16-10 fr08-16-10-4">5</div>
          </div>
          <div class="scr08-16-10">
            <div class="sp08-16-10">
              <span class="hint08-16-10">↓ 枠内をスクロール<br>スクロール量が切り替わるコマ番号になります</span>
            </div>
          </div>
        </div>

.d08-16-10{background:#1c1917;align-items:stretch;}
        .d08-16-10 .view08-16-10{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:#1c1917;
          display:flex;align-items:center;justify-content:center;
        }
        .d08-16-10 .reel08-16-10{position:relative;width:120px;height:120px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 4px rgba(255,255,255,.08);}
        .d08-16-10 .frame08-16-10{
          position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          font-size:34px;font-weight:800;color:#fff;opacity:0;transition:none;
        }
        .d08-16-10 .fr08-16-10-0{background:linear-gradient(135deg,#f87171,#dc2626);}
        .d08-16-10 .fr08-16-10-1{background:linear-gradient(135deg,#fb923c,#ea580c);}
        .d08-16-10 .fr08-16-10-2{background:linear-gradient(135deg,#facc15,#ca8a04);}
        .d08-16-10 .fr08-16-10-3{background:linear-gradient(135deg,#4ade80,#16a34a);}
        .d08-16-10 .fr08-16-10-4{background:linear-gradient(135deg,#38bdf8,#0284c7);}
        .d08-16-10 .scr08-16-10{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-10 .sp08-16-10{height:900px;padding:16px 18px 0;}
        .d08-16-10 .hint08-16-10{display:inline-block;font-size:11.5px;line-height:1.7;color:#f5f5f4;background:rgba(28,25,23,.6);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-10 .scr08-16-10');
        if(!scr)return;
        var frames=Array.prototype.slice.call(document.querySelectorAll('.d08-16-10 .frame08-16-10'));
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          var idx=Math.min(frames.length-1,Math.floor(p*frames.length));
          frames.forEach(function(f,i){f.style.opacity=i===idx?'1':'0';});
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();