G143 · פסים אופקיים שנפתחים בגלילה

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}

/* G143 · פסים אופקיים שנפתחים בגלילה */
.ac2{position:relative;height:260vh}
.ac2-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.ac2-stack{display:flex;flex-direction:column;gap:8px;width:min(1000px,92vw);height:78vh}
.ac2-p{flex:1 1 0;min-height:0;position:relative;border-radius:16px;overflow:hidden;display:flex;align-items:flex-end}
.ac2-p .ph{position:absolute;inset:0;border-radius:0;font-size:0}
.ac2-p h3{position:relative;z-index:1;margin:0;padding:16px 20px;color:#fff;font-size:clamp(16px,2vw,26px);text-shadow:0 2px 14px rgba(0,0,0,.5)}
@media(max-width:767px){.ac2-stack{height:70vh}}

HTML

<div class="ac2">
  <div class="ac2-pin"><div class="ac2-stack">
    <div class="ac2-p"><div class="ph ph-a"></div><h3>קליניקה בתל אביב</h3></div>
    <div class="ac2-p"><div class="ph ph-b"></div><h3>חנות אונליין לרהיטים</h3></div>
    <div class="ac2-p"><div class="ph ph-c"></div><h3>משרד עורכי דין</h3></div>
    <div class="ac2-p"><div class="ph ph-d"></div><h3>סטודיו לעיצוב פנים</h3></div>
  </div></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const panels=gsap.utils.toArray(".ac2-p"),n=panels.length;
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  gsap.set(panels,{flexGrow:1});gsap.set(panels[0],{flexGrow:6});
  const tl=gsap.timeline({scrollTrigger:{trigger:".ac2",start:"top top",end:"bottom bottom",scrub:.6}});
  for(let i=1;i<n;i++){tl.to(panels[i-1],{flexGrow:1,duration:1,ease:"power2.inOut"},i-1+.2).to(panels[i],{flexGrow:6,duration:1,ease:"power2.inOut"},i-1+.2);}
})();