太陽・月の運行スクラブ

<div class="view08-16-12">
          <div class="sky08-16-12"></div>
          <div class="nightOverlay08-16-12"></div>
          <div class="sun08-16-12"></div>
          <div class="moon08-16-12"></div>
          <div class="ground08-16-12"></div>
          <div class="scr08-16-12">
            <div class="sp08-16-12">
              <span class="hint08-16-12">↓ 枠内をスクロール<br>スクロール量が太陽・月の位置と時間帯になります</span>
            </div>
          </div>
        </div>

.d08-16-12{background:#0c4a6e;align-items:stretch;}
        .d08-16-12 .view08-16-12{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:#7dd3fc;
        }
        .d08-16-12 .sky08-16-12{position:absolute;inset:0;background:linear-gradient(180deg,#7dd3fc,#e0f2fe 75%);}
        .d08-16-12 .nightOverlay08-16-12{position:absolute;inset:0;background:linear-gradient(180deg,#0f172a,#1e293b 75%);opacity:0;will-change:opacity;}
        .d08-16-12 .sun08-16-12{position:absolute;left:8%;bottom:40px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#fff7cc,#fde047 60%,rgba(253,224,71,0));box-shadow:0 0 22px 6px rgba(253,224,71,.55);will-change:transform,opacity;}
        .d08-16-12 .moon08-16-12{position:absolute;left:8%;bottom:40px;width:26px;height:26px;border-radius:50%;background:#e2e8f0;box-shadow:inset 7px -3px 0 0 #94a3b8;opacity:0;will-change:transform,opacity;}
        .d08-16-12 .ground08-16-12{position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(180deg,#166534,#14532d);}
        .d08-16-12 .scr08-16-12{position:absolute;inset:0;overflow-y:auto;}
        .d08-16-12 .sp08-16-12{height:900px;padding:16px 18px 0;}
        .d08-16-12 .hint08-16-12{display:inline-block;font-size:11.5px;line-height:1.7;color:#0c4a6e;background:rgba(255,255,255,.75);padding:8px 12px;border-radius:8px;}

(function(){
        var scr=document.querySelector('.d08-16-12 .scr08-16-12');
        if(!scr)return;
        var view=document.querySelector('.d08-16-12 .view08-16-12');
        var night=document.querySelector('.d08-16-12 .nightOverlay08-16-12');
        var sun=document.querySelector('.d08-16-12 .sun08-16-12');
        var moon=document.querySelector('.d08-16-12 .moon08-16-12');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          var w=view.clientWidth-60;
          var arc=Math.sin(p*Math.PI)*76;
          var x=p*w;
          sun.style.transform='translate('+x+'px,'+(-arc)+'px)';
          moon.style.transform='translate('+x+'px,'+(-arc)+'px)';
          night.style.opacity=p.toFixed(2);
          var sunOp=1-Math.max(0,(p-0.42)/0.28);
          var moonOp=Math.max(0,(p-0.42)/0.28);
          sun.style.opacity=Math.min(1,Math.max(0,sunOp)).toFixed(2);
          moon.style.opacity=Math.min(1,Math.max(0,moonOp)).toFixed(2);
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();