G05 · מסך מפוצל: תמונות מתחלפות לפי טקסט

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-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* G05 · מסך מפוצל: תמונות מתחלפות לפי טקסט */
.sync{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap, clamp(16px, 1.6vw, 36px));padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.sync-media{position:sticky;top:15vh;height:70vh}
.sync-media .ph{position:absolute;inset:0;font-size:24px}
.sync-texts .block{min-height:80vh;display:flex;flex-direction:column;justify-content:center}
.sync-texts h2{font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.sync-texts p{color:var(--muted, #6a6d85);max-width:40ch}
@media(max-width:767px){.sync{grid-template-columns:1fr}.sync-media{position:static;height:36vh}}

HTML

<div class="sync">
<div class="sync-texts">
  <div class="block sync-t"><h2>פרק ראשון</h2><p>כשהבלוק הזה במרכז המסך רואים את הכחול.</p></div>
  <div class="block sync-t"><h2>פרק שני</h2><p>הגעת לכאן? הסגול נכנס בהדרגה מעל הכחול.</p></div>
  <div class="block sync-t"><h2>פרק שלישי</h2><p>והירוק סוגר את הסיפור.</p></div>
</div>
<div class="sync-media">
  <div class="ph ph-a si-1"><span class="ph-l">תמונה 1</span></div>
  <div class="ph ph-b si-2" style="opacity:1"><span class="ph-l">תמונה 2</span></div>
  <div class="ph ph-d si-3" style="opacity:1"><span class="ph-l">תמונה 3</span></div>
</div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".sync-t").forEach((txt,i)=>{
  if(i===0)return;
  gsap.from(".si-"+(i+1),{opacity:0,ease:"none",
    scrollTrigger:{trigger:txt,start:"top 60%",end:"top 30%",scrub:1}});
});