G137 · מרכאות שנפתחות סביב הציטוט

CSS

/* G137 · מרכאות שנפתחות סביב הציטוט */
.qq{min-height:120vh;display:grid;place-items:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.qq-box{position:relative;max-width:min(760px,92vw);text-align:center;padding:clamp(40px,8vw,90px) clamp(20px,5vw,60px)}
.qq-m{position:absolute;font-size:clamp(90px,16vw,220px);line-height:.6;font-weight:900;color:var(--accent, #4a3aff);opacity:.9;will-change:transform;font-family:Georgia,serif}
.qq-m.o{top:0;inset-inline-start:0}
.qq-m.c{bottom:0;inset-inline-end:0}
.qq-box blockquote{margin:0;font-size:clamp(20px,2.6vw,34px);font-weight:600;line-height:1.5;opacity:0;translate:0 14px}
.qq-box cite{display:block;margin-top:18px;font-style:normal;color:var(--muted, #6a6d85);font-size:15px;opacity:0}

HTML

<div class="qq"><div class="qq-box">
  <span class="qq-m o" aria-hidden="true">״</span>
  <blockquote>הפעם הראשונה שמישהו שאל אותנו מה הלקוח צריך לפני שדיבר על צבעים. האתר עלה תוך שבועיים, והפניות התחילו ביום הראשון.</blockquote>
  <cite>רועי ברק, משרד עורכי דין</cite>
  <span class="qq-m c" aria-hidden="true">״</span>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const box=document.querySelector(".qq-box"),o=box.querySelector(".qq-m.o"),c=box.querySelector(".qq-m.c");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce){gsap.set(".qq-box blockquote, .qq-box cite",{opacity:1,translate:"0 0"});return;}
  const mob=matchMedia("(max-width:767px)").matches,k=mob?.5:1;
  // מתחילים צמודים במרכז: מזיזים כל סימן מהפינה שלו אל האמצע, ובסקראב חוזרים ל-0
  gsap.set(o,{xPercent:-140*k,yPercent:120*k});gsap.set(c,{xPercent:140*k,yPercent:-120*k});
  gsap.timeline({scrollTrigger:{trigger:".qq",start:"top 70%",end:"center center",scrub:.6}})
    .to([o,c],{xPercent:0,yPercent:0,duration:1,ease:"power3.out"},0)
    .to(".qq-box blockquote",{opacity:1,translate:"0 0",duration:.6},.3)
    .to(".qq-box cite",{opacity:1,duration:.4},.7);
})();