B17 · תג HUD: מה על המסך עכשיו

CSS

/* B17 · תג HUD: מה על המסך עכשיו */
.hud-sec{min-height:80vh;display:grid;place-items:center;border-top:1px solid var(--line, #e4e4ee);font-size:clamp(28px,3vw,52px);font-weight:700;color:var(--muted, #6a6d85)}
.hud-sec:nth-child(odd){background:var(--card, #fff)}
.hud{position:fixed;bottom:22px;left:22px;z-index:60;display:flex;align-items:center;gap:12px;background:#111;color:#fff;border-radius:999px;padding:10px 16px;font-size:12px;letter-spacing:.14em;opacity:0;visibility:hidden}
.hud i{width:6px;height:6px;border-radius:50%;background:#c6ff4a}
.hud b{font-variant-numeric:tabular-nums;font-weight:600;display:inline-block;min-width:3ch;text-align:left;direction:ltr}

HTML

<div class="hud-wrap">
  <section class="hud-sec" data-n="001">סקשן ראשון</section>
  <section class="hud-sec" data-n="002">סקשן שני</section>
  <section class="hud-sec" data-n="003">סקשן שלישי</section>
  <section class="hud-sec" data-n="004">סקשן רביעי</section>
  <section class="hud-sec" data-n="005">סקשן חמישי</section>
</div>
<div class="hud" aria-live="polite">על המסך <i></i> <b>000</b></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const hud=document.querySelector(".hud"),num=hud.querySelector("b");
  let shown=false;
  function show(){if(shown)return;shown=true;gsap.fromTo(hud,{scale:.97,autoAlpha:0},{scale:1,autoAlpha:1,duration:.16,ease:"back.out(20)"});}
  function hide(){if(!shown)return;shown=false;gsap.to(hud,{scale:.97,autoAlpha:0,duration:.16,ease:"expo.in"});}
  function setNum(n){
    if(num.textContent===n)return;
    gsap.timeline().to(num,{yPercent:-60,autoAlpha:0,duration:.14,ease:"power2.in",onComplete:()=>num.textContent=n})
      .fromTo(num,{yPercent:60},{yPercent:0,autoAlpha:1,duration:.22,ease:"back.out(3)"});
    gsap.fromTo(hud,{scale:.96},{scale:1,duration:.3,ease:"back.out(6)"});
  }
  // נראות: טריגר אחד על כל האזור. מספר: טריגר לכל סקשן. כך התג לא נתקע גלוי בקפיצות גלילה.
  ScrollTrigger.create({trigger:".hud-wrap",start:"top center",end:"bottom center",
    onToggle:self=>self.isActive?show():hide()});
  gsap.utils.toArray(".hud-sec").forEach(s=>ScrollTrigger.create({trigger:s,start:"top center",end:"bottom center",
    onToggle:self=>{if(self.isActive)setNum(s.dataset.n);}}));
})();