איך נבנתה שונית הנייר

03

מתמטיקת הפרלקסה

כל שכבה מקבלת data-para="depth". בכל פריים של גלילה מחשבים כמה רחוק מרכז הפרק ממרכז המסך, מנרמלים לטווח 1- עד 1+, ומכפילים בעומק:

// progress: -1 (הפרק מתחת למסך) ... 0 (במרכז) ... +1 (מעל)
const r = section.getBoundingClientRect();
const progress = ((r.top + r.height / 2) - vh / 2)
               / ((vh + r.height) / 2);

// עומק שלילי = רחוק (זז הפוך), חיובי = קרוב
layer.style.translate = `0 ${progress * depth}px`;

שני חסכונות שומרים על 60fps: IntersectionObserver מפעיל רק שכבות שנמצאות על המסך, ו-requestAnimationFrame מרכז את כל הכתיבות לפריים אחד. העכבר מוסיף פרלקסה עדינה משלו בפרק הפתיחה בלבד.

04

הקרעים: אף גל לא צויר פעמיים

כל תפר בין פרקים הוא שלוש רצועות נייר שמוחוללות בזמן טעינה מזרע קבוע (seeded RNG), כך שהקצוות תמיד "קרועים" אבל זהים בכל טעינה. כל רצועה מטילה צל כלפי מעלה על הרצועה שמאחוריה, בדיוק כמו נייר על נייר:

function wavePath(rnd, y0, amp, segs) {
  let x = 0, y = y0, d = `M0 ${H} L0 ${y0}`;
  const step = W / segs;
  for (let i = 0; i < segs; i++) {
    const ny = y0 + (rnd() * 2 - 1) * amp;   // ±amp jitter
    d += ` C ${x + step * .42} ${y},
           ${x + step * .58} ${ny},
           ${x + step} ${ny}`;
    x += step; y = ny;
  }
  return d + ` L${W} ${H} Z`;
}
/* צל של נייר: drop-shadow(0 -5px 5px) על כל רצועה */

והנה אחד חי, נולד ברגע שטענתם את הדף הזה: