G120 · רשימה שהפריט במרכז שלה גדל

CSS

/* G120 · רשימה שהפריט במרכז שלה גדל */
.fe{max-width:min(760px,92vw);margin-inline:auto;padding-block:40vh}
.fe-it{display:flex;align-items:baseline;gap:18px;padding:10px 0;transform-origin:100% 50%;will-change:transform,opacity;border-bottom:1px solid var(--line, #e4e4ee)}
html[dir="ltr"] .fe-it{transform-origin:0 50%}
.fe-it b{font-size:clamp(22px,3vw,40px);font-weight:800;min-width:0}
.fe-it span{font-size:14px;color:var(--muted, #6a6d85);opacity:0;translate:0 4px;transition:opacity .3s,translate .3s}
.fe-it.on span{opacity:1;translate:0 0}
.fe-it i{font-style:normal;font-size:12px;color:var(--accent, #4a3aff);letter-spacing:.12em;min-width:2.4em}

HTML

<div class="fe">
  <div class="fe-it"><i>01</i><b>אפיון ואסטרטגיה</b><span>שיחה, מסמך, החלטות</span></div>
  <div class="fe-it"><i>02</i><b>קופי בעברית</b><span>כל משפט עונה על שאלה</span></div>
  <div class="fe-it"><i>03</i><b>עיצוב ממשק</b><span>מובייל קודם, תמיד</span></div>
  <div class="fe-it"><i>04</i><b>בניית אתר</b><span>מהיר, נגיש, מדיד</span></div>
  <div class="fe-it"><i>05</i><b>חנות אונליין</b><span>סליקה, מלאי, משלוחים</span></div>
  <div class="fe-it"><i>06</i><b>מערכות ניהול</b><span>CRM, פורטלים, דוחות</span></div>
  <div class="fe-it"><i>07</i><b>אוטומציות</b><span>מה שחוזר על עצמו, רץ לבד</span></div>
  <div class="fe-it"><i>08</i><b>ליווי שוטף</b><span>חודש בחודשו, בלי התחייבות</span></div>
  <div class="fe-it"><i>09</i><b>קמפיינים</b><span>מטא וגוגל, עם מדידה</span></div>
  <div class="fe-it"><i>10</i><b>תחזוקה ואבטחה</b><span>עדכונים, גיבויים, שקט</span></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const items=gsap.utils.toArray(".fe-it");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){items.forEach(i=>i.classList.add("on"));return;}
  const MAX=matchMedia("(max-width:767px)").matches?1.25:1.6,R=()=>innerHeight*.35;
  const set=items.map(el=>({el,s:gsap.quickSetter(el,"scale"),o:gsap.quickSetter(el,"opacity")}));
  function paint(){const mid=innerHeight/2,r=R();let best=null,bd=1e9;
    set.forEach(x=>{const b=x.el.getBoundingClientRect(),d=Math.abs(b.top+b.height/2-mid),t=Math.max(0,1-d/r);
      x.s(1+(MAX-1)*t*t);x.o(.3+.7*t);if(d<bd){bd=d;best=x.el;}});
    items.forEach(i=>i.classList.toggle("on",i===best));}
  ScrollTrigger.create({trigger:".fe",start:"top bottom",end:"bottom top",onUpdate:paint,onRefresh:paint});
  paint();
})();