G115 · מחשב נייד שנפתח בגלילה

CSS

/* G115 · מחשב נייד שנפתח בגלילה */
.lp{position:relative;height:200vh}
.lp-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;perspective:1600px;overflow:hidden}
.lp-dev{position:relative;width:min(760px,88vw);transform-style:preserve-3d;will-change:transform}
.lp-lid{position:relative;aspect-ratio:16/10;border-radius:18px 18px 4px 4px;background:var(--ink, #16182b);padding:14px;transform-origin:50% 100%;transform-style:preserve-3d;will-change:transform;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.lp-scr{width:100%;height:100%;border-radius:10px;background:#0c0d16;overflow:hidden;position:relative}
.lp-ui{position:absolute;inset:0;padding:6%;display:grid;grid-template-columns:1fr 3fr;gap:3%;opacity:0}
.lp-ui i{display:block;border-radius:6px;background:rgba(255,255,255,.08)}
.lp-ui .side{display:grid;gap:8%;align-content:start}
.lp-ui .side i{height:10%}
.lp-ui .side i:first-child{background:var(--accent, #4a3aff);height:16%}
.lp-ui .main{display:grid;grid-template-rows:1fr 2fr;gap:6%}
.lp-ui .main i:last-child{background:linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--accent, #4a3aff) 35%,transparent))}
.lp-base{height:18px;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#2a2d3f,#15172a);position:relative}
.lp-base::after{content:"";position:absolute;top:0;left:50%;translate:-50% 0;width:18%;height:5px;border-radius:0 0 6px 6px;background:#0c0d16}
.lp-cap{position:absolute;bottom:8vh;inset-inline:0;text-align:center;color:var(--muted, #6a6d85);font-size:14px}
@media(max-width:767px){.lp{height:160vh}.lp-pin{perspective:1000px}}

HTML

<div class="lp">
  <div class="lp-pin"><div class="lp-dev">
    <div class="lp-lid"><div class="lp-scr"><div class="lp-ui"><div class="side"><i></i><i></i><i></i><i></i></div><div class="main"><i></i><i></i></div></div></div></div>
    <div class="lp-base"></div>
  </div><p class="lp-cap">גלול כדי לפתוח</p></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const lid=document.querySelector(".lp-lid"),dev=document.querySelector(".lp-dev");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(".lp-ui",{opacity:1});return;}
  const mob=matchMedia("(max-width:767px)").matches;
  gsap.set(lid,{rotateX:-88});gsap.set(dev,{rotateX:mob?8:14,y:40});
  gsap.timeline({scrollTrigger:{trigger:".lp",start:"top top",end:"bottom bottom",scrub:.6}})
    .to(lid,{rotateX:0,duration:1,ease:"power2.inOut"},0)
    .to(dev,{rotateX:mob?2:4,y:0,duration:1,ease:"power2.inOut"},0)
    .to(".lp-ui",{opacity:1,duration:.4},.4)
    .to(".lp-cap",{opacity:0,duration:.2},0);
})();