G58 · כותרת ענקית שרואים דרכה את המדיה

CSS

/* G58 · כותרת ענקית שרואים דרכה את המדיה */
.tm{height:220vh;position:relative}
.tm-stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;background:var(--bg, #f7f7fa)}
.tm-word{margin:0;font-size:clamp(72px,20vw,280px);line-height:.92;font-weight:800;letter-spacing:-.02em;
  text-align:center;
  background-image:linear-gradient(120deg,#3b5bdb,#0b7285 38%,#e8590c 68%,#5f3dc4);
  background-size:260% 260%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}
/* אם הדפדפן לא תומך בחיתוך רקע לטקסט, חוזרים לצבע מלא ולא לטקסט שקוף */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .tm-word{color:var(--ink, #16182b);-webkit-text-fill-color:currentColor}
}
.tm-sub{position:absolute;bottom:11vh;inset-inline:0;text-align:center;color:var(--muted, #6a6d85);font-size:15px}
.tm-after{padding:14vh var(--gutter, clamp(24px, 5vw, 96px));max-width:min(680px,92vw);margin-inline:auto;text-align:center;
  color:var(--muted, #6a6d85);font-size:17px;line-height:1.9}

HTML

<div class="tm"><div class="tm-stick">
  <h2 class="tm-word">אתרים<br>שמביאים</h2>
  <p class="tm-sub">גלול. מה שרואים בתוך האותיות זז.</p>
</div></div>
<p class="tm-after">במקום גרדיאנט אפשר לשים כאן תמונה או וידאו של הלקוח, ואז האותיות הופכות לחלון אל העבודה עצמה.</p>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const word=document.querySelector(".tm-word");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce)return;
  gsap.timeline({scrollTrigger:{trigger:".tm",start:"top top",end:"bottom bottom",scrub:.5}})
    // הרקע הוא מה שנע, לא הטקסט: האותיות נשארות במקום והחלון שלהן מראה חלק אחר
    .fromTo(word,{backgroundPosition:"0% 50%"},{backgroundPosition:"100% 50%",ease:"none"},0)
    .fromTo(word,{scale:.86,letterSpacing:"0.04em"},{scale:1,letterSpacing:"-0.02em",ease:"none"},0);
})();