G104 · מוצר שמחליף צבע בגלילה

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}

/* G104 · מוצר שמחליף צבע בגלילה */
.pv{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap, clamp(16px, 1.6vw, 36px));align-items:start}
.pv-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.pv-fig{position:relative;width:min(440px,80%);aspect-ratio:4/5;border-radius:var(--r, 14px);overflow:hidden;background:#e9e9ee;isolation:isolate}
.pv-shape{position:absolute;inset:14%;border-radius:40% 40% 46% 46% / 50% 50% 40% 40%;background:linear-gradient(160deg,#fafafa,#8f8f98 70%,#5a5a64)}
.pv-tint{position:absolute;inset:14%;border-radius:inherit;border-radius:40% 40% 46% 46% / 50% 50% 40% 40%;mix-blend-mode:multiply;opacity:0}
.pv-steps{display:flex;flex-direction:column;gap:40vh;padding-block:36vh}
.pv-step{display:grid;gap:8px}
.pv-step i{width:22px;height:22px;border-radius:50%;border:2px solid var(--card, #fff);box-shadow:0 0 0 1px var(--line, #e4e4ee)}
.pv-step h3{margin:0;font-size:clamp(22px,2.6vw,36px)}
.pv-step p{margin:0;color:var(--muted, #6a6d85);line-height:1.7;max-width:36ch}
.pv-step b{font-size:20px}
@media(max-width:767px){.pv{grid-template-columns:1fr}.pv-pin{height:42vh;top:0;z-index:2;background:var(--bg, #f7f7fa)}.pv-fig{width:min(48vw,220px)}.pv-steps{gap:26vh;padding-block:6vh 30vh}}

HTML

<div class="stage tight"><div class="pv">
  <div class="pv-pin"><div class="pv-fig"><div class="pv-shape"></div>
    <div class="pv-tint" style="background:#c2255c"></div><div class="pv-tint" style="background:#1c7ed6"></div><div class="pv-tint" style="background:#2b8a3e"></div><div class="pv-tint" style="background:#e8590c"></div></div></div>
  <div class="pv-steps">
    <div class="pv-step"><i style="background:#c2255c"></i><h3>אדום פטל</h3><p>המהדורה הראשונה. נועז, נראה מרחוק.</p><b>1,290 ש"ח</b></div>
    <div class="pv-step"><i style="background:#1c7ed6"></i><h3>כחול אוקיינוס</h3><p>הקלאסי. מתאים לכל חלל.</p><b>1,290 ש"ח</b></div>
    <div class="pv-step"><i style="background:#2b8a3e"></i><h3>ירוק יער</h3><p>עמוק ושקט. הנמכר ביותר השנה.</p><b>1,390 ש"ח</b></div>
    <div class="pv-step"><i style="background:#e8590c"></i><h3>כתום שקיעה</h3><p>מהדורה מוגבלת, עד גמר המלאי.</p><b>1,490 ש"ח</b></div>
  </div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const tints=gsap.utils.toArray(".pv-tint"),steps=gsap.utils.toArray(".pv-step");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  let cur=-1;
  function show(k){ if(k===cur)return;cur=k;
    tints.forEach((t,i)=>gsap.to(t,{opacity:i===k?.85:0,duration:reduce?0:.7,ease:"power2.inOut",overwrite:true}));
    steps.forEach((s,i)=>gsap.to(s,{opacity:i===k?1:.35,duration:reduce?0:.4,overwrite:true}));
  }
  show(0);
  steps.forEach((s,i)=>ScrollTrigger.create({trigger:s,start:"top 60%",end:"bottom 40%",onEnter:()=>show(i),onEnterBack:()=>show(i)}));
})();