G118 · אלכסון צבע שמסתובב מאחורי העמוד

CSS

/* G118 · אלכסון צבע שמסתובב מאחורי העמוד */
.dg{position:relative}
.dg-bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden;z-index:0;pointer-events:none}
.dg-pane{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;translate:-50% -50%;background:linear-gradient(90deg,var(--ink, #16182b) 0 50%,var(--accent, #4a3aff) 50% 100%);will-change:transform;opacity:.94}
.dg-body{position:relative;z-index:1}
.dg-sec{min-height:100vh;display:grid;align-content:center;padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));color:var(--bg, #f7f7fa)}
.dg-sec:nth-child(even){justify-items:end;text-align:end;color:var(--accent-ink, #fff)}
.dg-sec h2{margin:0 0 10px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px));max-width:20ch}
.dg-sec p{margin:0;max-width:40ch;opacity:.85;line-height:1.7}

HTML

<div class="dg">
  <div class="dg-bg" aria-hidden="true"><div class="dg-pane"></div></div>
  <div class="dg-body">
    <section class="dg-sec"><h2>צד אחד של הסיפור</h2><p>מה שהיה: אתר יפה שאף אחד לא פנה דרכו.</p></section>
    <section class="dg-sec"><h2>והצד השני</h2><p>מה שיש: עמוד שמסביר, ומספרים שעולים.</p></section>
    <section class="dg-sec"><h2>הגבול ביניהם זז</h2><p>כל גלילה מטה את הקו קצת. זה כל הרעיון.</p></section>
  </div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  const a=matchMedia("(max-width:767px)").matches?8:14;
  gsap.fromTo(".dg-pane",{rotate:-a},{rotate:a,ease:"none",scrollTrigger:{trigger:".dg",start:"top top",end:"bottom bottom",scrub:.8}});
})();