G15 · פרילודר פרימיום (עלייה)

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.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}
.center{text-align:center}

/* G15 · פרילודר פרימיום (עלייה) */
#pre{position:fixed;inset:0;background:var(--ink, #16182b);z-index:999;display:flex;align-items:center;justify-content:center;color:var(--bg, #f7f7fa);font-size:20px;font-weight:700}
.replay{margin-inline:var(--gutter, clamp(24px, 5vw, 96px))}

HTML

<div id="pre">כאן יושב הלוגו או לוטי של המותג</div>
<div class="stage tight center"><button class="gbtn replay">הפעל שוב את הפרילודר</button></div>

JS

function runPre(){
  const p=document.getElementById("pre");
  p.style.display="flex";gsap.set(p,{yPercent:0});
  gsap.to(p,{yPercent:-100,duration:.6,ease:"power3.inOut",delay:.9,
    onComplete:()=>p.style.display="none"});
}
let done=false;
function hide(){if(done)return;done=true;runPre();}
if(document.readyState==="complete")hide();
else{addEventListener("load",hide);setTimeout(hide,3000);}
document.querySelector(".replay").addEventListener("click",runPre);