איך נבנה הגיליון

הרעיון

עיתון נדפס שפוגש כרזה שוויצרית

האתר המקורי של wpzvi מספר סיפור תת-ימי בחמישה פרקים: זרם, תמנון, לוויתן, כריש וקפה. הגרסה הזאת מוותרת על כל התמונות ושואלת מה נשאר. התשובה: חמישה "עמודים ראשיים" של עיתון, כותרות ענק, קווי מערכת, ספרות כעמודי שער, והים קיים רק בשפה ובתנועה.

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

מערכת הטיפוגרפיה

שתי משפחות, ציר משקל אחד

Heebo בגרסה המשתנה (Variable Font) נושא את כל הכותרות והקינטיקה: ציר משקל רציף מ-100 עד 900 בקובץ אחד. Frank Ruhl Libre, הסריף העיתונאי העברי, משמש לכותרת העיתון, לטקסט הרץ ולאותיות הפתיחה המוגדלות.

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

הקינטיקה

שלוש טכניקות, בלי ספרייה אחת

1 · שורות שנחשפות ומתהדקות

כל שורת כותרת יושבת בתוך מסכת overflow: hidden. כשהיא נכנסת למסך היא מחליקה מלמטה, ובמקביל המשקל שלה עובר מ-240 ל-900 והמרווח בין האותיות מתכווץ מ-0.05em למינוס. שתי האנפשות רצות כ-transition על font-variation-settings ועל letter-spacing, כך שהשורה "מתהדקת" לתוך מקומה כמו כותרת שנסגרת לדפוס.

2 · קו הגאות

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

כל רצועה בגיליון נושאת את המילים של הפרק שלה: הזרם אחרי עמוד 01, הצלילה אחרי עמוד 03, והקפה לפני עמוד 05. שינויי המשקל גורמים לרוחב המילים לנשום, ולכן הרצועה כלואה ב-contain: layout paint כדי שהגלים לא יזיזו שום דבר אחר בעמוד.

3 · ספרות הרפאים

מספרי העמודים הענקיים (01 עד 05) הם טקסט במשקל 100 עם -webkit-text-stroke ומילוי שקוף. הם זזים בפרלקסה איטית ומקבלים הטיה קלה כשגוללים מהר, תמיד דרך transform בלבד, בלי לגעת ב-layout.

הדפוס

נייר, דיו, וזהב אחד ממושמע

שפת הקווים לקוחה מעיתונות מודפסת: קו כפול (4px מעל 1px) פותח וסוגר את הגיליון, קווי טור דקים מפרידים בין השירותים, ונקודות מוליכות מחברות תווית למספר, כמו בלוח תוכן עניינים:

הזהב מופיע רק במקומות ספורים: המילה האחרונה של כל כותרת, מילה אחת בקו הגאות, מד ההתקדמות, ומחוות ריחוף. כל השאר דיו על נייר.

בטיחות תנועה

מהיר, נגיש, עצמאי

• prefers-reduced-motion: כל האנפשות נעלמות, הכותרות מופיעות מיושבות מיד, וקו הגאות קופא לשורה שקטה.
• טעינת פונטים: ארבעת קובצי ה-woff2 (כ-100KB יחד) נטענים מקומית עם preload, והחשיפות מתחילות רק אחרי document.fonts.ready, כך שאין הבזק של פונט חלופי באמצע אנימציה.
• בלי רשת: אפס CDN, אפס ספריות, אפס תמונות. אפילו ה-favicon הוא SVG מצויר בקוד.
• בלי JavaScript: הכל קריא. ה-JS מוסיף תנועה, תאריך עברי חי בכותרת, ומד התקדמות, ולא מחזיק שום תוכן.