LM5 · סולם כניסות הירו (150ms)

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.gbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-inline:28px;border-radius:999px;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);font-weight:500;font-size:16px;border:0;cursor:pointer;font-family:inherit}

/* LM5 · סולם כניסות הירו (150ms) */
.ladder{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.lad{opacity:0;translate:0 18px;transition:opacity .6s cubic-bezier(.2,.6,.2,1),translate .6s cubic-bezier(.2,.6,.2,1)}
.go .lad{opacity:1;translate:0 0}
.go .l1{transition-delay:0ms}.go .l2{transition-delay:150ms}.go .l3{transition-delay:300ms}
.go .l4{transition-delay:450ms}.go .l5{transition-delay:600ms}
.ladder .kick{color:var(--accent, #4a3aff);font-weight:600;font-size:14px;letter-spacing:.14em}
.ladder h2{font-size:var(--fs-demo, clamp(36px, 3vw + 0.5rem, 76px));max-width:18ch;margin:12px 0}
.ladder p{color:var(--muted, #6a6d85);max-width:52ch;margin:0 0 22px}
.replay{margin-top:30px;align-self:flex-start}

HTML

<div class="ladder">
<span class="kick lad l1">רגע הזהות</span>
<h2 class="lad l2">כל שורה נכנסת 150 אלפיות אחרי קודמתה</h2>
<p class="lad l3">הסולם שמור להירו בלבד. ככה נשמרת הטבעיות בשאר העמוד.</p>
<div class="lad l4"><button class="gbtn">כפתור ראשי</button></div>
<span class="lad l5" style="font-size:13px;color:var(--muted);margin-top:12px">שורת מיקרו · אמון · בלי התחייבות</span>
<button class="gbtn replay" style="background:var(--ink);color:var(--bg)">הפעל שוב</button>
</div>

JS

const lad=document.querySelector(".ladder");
// go חייב להתווסף אחרי הציור הראשון. אם הוא כבר במארקאפ אין שינוי מצב, ולכן אין טרנזישן בכלל
// והרכיבים פשוט מופיעים גמורים. זאת גם הסיבה ל-void offsetHeight בהפעלה חוזרת.
const play=()=>{lad.classList.remove("go");void lad.offsetHeight;lad.classList.add("go")};
// והפעלה על כניסה למסך ולא על טעינה: בהירו אמיתי זה אותו רגע בדיוק, אבל כשהסקשן יושב
// באמצע עמוד ארוך הסולם רץ ונגמר לפני שמגיעים אליו, ונראה שכלום לא קרה.
// לא מנתקים את הצופה: כשהסקשן יוצא מהמסך המחלקה מוסרת (מחוץ לעין), וכשחוזרים אליו הסולם רץ שוב.
new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)play();else lad.classList.remove("go");}),{threshold:.45}).observe(lad);
document.querySelector(".replay").addEventListener("click",play);