瞬く星空多層パララックス

<div class="view08-12-11">
          <div class="stA08-12-11"></div>
          <div class="stB08-12-11"></div>
          <div class="stC08-12-11"></div>
          <div class="scr08-12-11">
            <div class="sp08-12-11">
              <span class="hint08-12-11">↓ 枠内をスクロール<br>星が3つの速度できらめきながら流れます</span>
            </div>
          </div>
        </div>

.d08-12-11{background:#020412;align-items:stretch;}
        .d08-12-11 .view08-12-11{
          position:relative;width:100%;height:212px;border-radius:12px;
          overflow:hidden;background:radial-gradient(circle at 60% 20%,#161334,#020412 75%);
        }
        .d08-12-11 .stA08-12-11,.d08-12-11 .stB08-12-11,.d08-12-11 .stC08-12-11{
          position:absolute;inset:-30px;will-change:transform;
        }
        .d08-12-11 .stA08-12-11{
          background:
            radial-gradient(circle 1.4px at 12% 20%,rgba(255,255,255,.55),transparent 70%),
            radial-gradient(circle 1.2px at 40% 12%,rgba(255,255,255,.5),transparent 70%),
            radial-gradient(circle 1.6px at 70% 25%,rgba(255,255,255,.5),transparent 70%),
            radial-gradient(circle 1.3px at 90% 15%,rgba(255,255,255,.45),transparent 70%);
          animation:tw1777a 3.4s ease-in-out infinite;
        }
        .d08-12-11 .stB08-12-11{
          background:
            radial-gradient(circle 2px at 25% 55%,rgba(199,210,254,.7),transparent 70%),
            radial-gradient(circle 1.8px at 55% 65%,rgba(199,210,254,.65),transparent 70%),
            radial-gradient(circle 2.2px at 82% 50%,rgba(199,210,254,.6),transparent 70%);
          animation:tw1777b 2.6s ease-in-out infinite;
        }
        .d08-12-11 .stC08-12-11{
          background:
            radial-gradient(circle 2.6px at 18% 82%,rgba(253,224,71,.8),transparent 70%),
            radial-gradient(circle 3px at 62% 88%,rgba(253,224,71,.75),transparent 70%);
          animation:tw1777c 4s ease-in-out infinite;
        }
        @keyframes tw1777a{0%,100%{opacity:.4}50%{opacity:1}}
        @keyframes tw1777b{0%,100%{opacity:.55}50%{opacity:1}}
        @keyframes tw1777c{0%,100%{opacity:.5}50%{opacity:1}}
        .d08-12-11 .scr08-12-11{position:absolute;inset:0;overflow-y:auto;}
        .d08-12-11 .sp08-12-11{height:660px;padding:16px 18px 0;}
        .d08-12-11 .hint08-12-11{display:inline-block;font-size:11.5px;line-height:1.7;color:#e0e7ff;background:rgba(2,4,18,.55);padding:8px 12px;border-radius:8px;}
        @media (prefers-reduced-motion: reduce){
          .d08-12-11 .stA08-12-11,.d08-12-11 .stB08-12-11,.d08-12-11 .stC08-12-11{animation:none;opacity:.75}
        }

(function(){
        var scr=document.querySelector('.d08-12-11 .scr08-12-11');
        if(!scr)return;
        var a=document.querySelector('.d08-12-11 .stA08-12-11');
        var b=document.querySelector('.d08-12-11 .stB08-12-11');
        var c=document.querySelector('.d08-12-11 .stC08-12-11');
        function update(){
          var max=scr.scrollHeight-scr.clientHeight;
          var p=max>0?scr.scrollTop/max:0;
          a.style.transform='translateY('+(-p*10)+'px)';
          b.style.transform='translateY('+(-p*32)+'px)';
          c.style.transform='translateY('+(-p*60)+'px)';
        }
        scr.addEventListener('scroll',update,{passive:true});
        update();
      })();