Chapters

אותו דבר עם לוטי

810 פריימים, ו-at מחושב לפיהם: at: 0.38 הוא פריים 308. עם layout="split", כי לוטי כזה מצויר על רקע לבן.

הסרטון והאתר כדבר אחד

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

המנגנון נותן טיימינג, היצירתיות בסרטון. Velune של HorizonX: הכותרת יושבת בתוך חלון של מטוס, ובגלילה נראה שהמלל עובר מהחלון לשמיים. בפועל הסרטון עושה זום דרך החלון, ובאותו רגע פרק אחד יוצא ופרק אחר נכנס. כל ה-WTF הוא בסרטון ובמקום שבו שמו את המלל, לא ב-GSAP: מבחינת המנגנון זה at אחד. אז כשבוחרים סרטון, שואלים מה הוא עושה לעימוד: האם יש בו מסגרת שאפשר להושיב בה מלל, ורגע שהוא נפתח ממנה. ואת ה-at שמים על הרגע הזה.

דוגמה: Alder & Stone של HorizonX, על אפור בהיר. מה שנראה בפריימים של הפריוויו ואין אצלנו: המלל מתערבל ביציאה, הכותרת יוצאת ונכנסת במסיכה, והסצנה מתפרקת לחלקיקים ומתחברת מחדש על אותו רקע (זה כבר בתוך הסרטון או התלת-ממד, לא במנגנון).

<UkChapters video="/film.mp4" chapters={...} className="my-film" />
<section className="my-next-section">...</section>

/* בלי framed: מסגרת מציירת את התפר */
.my-film {
  --uk-chapters-shade: none;
  --uk-chapters-ground: #ececec;   /* הצבע שדוגמים מהסרטון */
  --uk-chapters-ink: #111;         /* על סרטון בהיר */
}
.my-next-section { background: #ececec; }

להכין סרטון

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

npm run scrub-video -- input.mp4 my-film
npm run scrub-video -- input.mp4 my-film --from 2 --to 9 --w 1280

Props