G134 · מעבר דרך הסקשן אל הבא

הסקשן הנוכחי גדל לעבר הצופה ונעלם מעבר למצלמה, והסקשן הבא מתגלה מאחוריו קטן וגדל למקומו. תחושה של לעבור דרך דלת.

מתי משתמשים: מעבר בין שני פרקים באתר חוויה, מהירו לפרק הראשון. פעם אחת בעמוד.

הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.

קוד להדבקה

הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית.

פתח קובץ עצמאי ↗

הצג את הקוד כאן

CSS

/* G134 · מעבר דרך הסקשן אל הבא */
.zt2{position:relative;height:200vh}
.zt2-pin{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1000px}
.zt2-a,.zt2-b{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;will-change:transform,opacity}
.zt2-a{background:var(--card, #fff);z-index:2}
.zt2-b{background:var(--ink, #16182b);color:var(--bg, #f7f7fa);opacity:0}
.zt2-a h2,.zt2-b h2{margin:0 0 10px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px));max-width:20ch}
.zt2-a p,.zt2-b p{margin:0;opacity:.75;max-width:40ch;line-height:1.7}

HTML

<div class="zt2">
  <div class="zt2-pin">
    <section class="zt2-a"><div><h2>הדלת הראשונה</h2><p>גלול, ותעבור דרכה.</p></div></section>
    <section class="zt2-b"><div><h2>ומה שמאחוריה</h2><p>הפרק שבו מספרים מה באמת קורה.</p></div></section>
  </div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(".zt2-a",{opacity:0});gsap.set(".zt2-b",{opacity:1});return;}
  const mob=matchMedia("(max-width:767px)").matches;
  gsap.timeline({scrollTrigger:{trigger:".zt2",start:"top top",end:"bottom bottom",scrub:.6}})
    .to(".zt2-a",{scale:mob?1.8:2.4,opacity:0,duration:1,ease:"power2.in"},0)
    .fromTo(".zt2-b",{scale:.6,opacity:0},{scale:1,opacity:1,duration:1,ease:"power2.out"},.15);
})();