Storytelling
לא אפקט אלא הדרך לחבר אפקטים: גלילה ארוכה אחת שבה כל חלק מעביר לבא אחריו. כל החלקים כבר בארסנל, מה שנוסף הוא המסירה ביניהם. מתאים במיוחד לאתרים חוויתיים ולאתרים עם תמונות מרשימות שיכולות לתפוס את כל המסך. עשוי לרדת במובייל ועשוי לדרוש התאמות נגישות.
אפשר לשלב כמה סקשנים בסגנון הזה, או דף שלם. צריך לשים לב לריתם של הדף: לפעמים מוזר שיש כמה סקשנים עם אפקטים כאלה, ופתאום עוד 60% מהדף גוללים רגיל לגמרי. הגולש מתרגל לחוויה של גלילה, ומוזר שמשלבים בתוכה פתאום "מאמר".
דוגמאות
?map בכתובת מציג בשורה אדומה בפינה איזה חלק על המסך וממה הוא בנוי (UkEffectMap).
רפרנס טוב לסגנון: ayocin.com.
חלקים לדוגמא (דוגמא למימוש)
לא רשימה קבועה ולא סדר: כל סיפור בוחר חלקים משלו, בסדר שלו.
- Chapters: עם סרטון זה נשק יום הדין: סרטון שזז נותן תחושה של משהו שאי אפשר להשיג ב-CSS. למשל רכב: הסרטון נכנס בזום לדאשבורד, ורשום "מסך מגע 22 אינץ׳". החיסרון: בטלפון הפרופורציה של הסרטון שונה (אולי צריך לו גודל אחר), פרטים נאבדים ואין מקום למלל ליד חלקים בסרטון. לרוב זה יורד דור: נניח המלל מתחלף ב-fade במקום קבוע, לעומת הדינמיות האפשרית בדסקטופ
- Cover Hero: ההירו שוקע והבא עולה מעליו
- Push Under: מה שנעצר, והבא עולה מעליו (Sticky stacking). עוטף חלקים אחרים
- Uncover: עוד דרך חינמית לעומק: הסקשן עולה, והבא כבר מחכה מתחתיו. טוב אחרי גלילה רגילה, וכשמה שמתחת לא לבן: אז כל תנועה חושפת משהו
- Scroll Text Swap: משפטים קצרים עולים ממסכה, על תמונה אחת עם פרלקס (bg)
- Panel Stack: פאנל מעל פאנל, חיתוך מלמטה. textFade={false}: כרטיס אחד שמתחלף
- Parallax Image: סקשן רגיל לנשימה: תמונה כהה זזה מאחורי טקסט
- Puzzle on Scroll: המוצר נבנה מחלקים
- Shader Cross: עולם אחד הופך לאחר בתוך שיידר
- Shape World: צורה נפתחת, ומה שבתוכה הוא הרקע החדש של העמוד: Match Cut
האלמנטים של סקשן שנכנס: 4 אפשרויות
- בלי אנימציה בכלל.
- אטריביוט של When something appears: מובנה בארסנל.
- פאזל: מנגנון מובנה בארסנל, וזה מה שנותן את הגמישות.
- TL עצמאי, 100% קוסטום: מקרי קיצון של אנימציה מורכבת מאוד. נדיר מאוד, ודורש בקשה מפורשת ואפיון.
מה משפר סטורי
המלא בסקיל scroll-chain.
- תמיד משהו מגיב לגלילה (Dead spots): כשכלום לא זז, הגולש מאבד את הקשר בין הגלילה לדף. מספיק אפילו פרלקס. אם לא קורה כלום, למה זה סטיקי?
- עומק: לא הכול חייב לעלות מעל. פתאום משהו בא גם מתחת.
- מיקס של כוחות בתנועה אחת (סנכרון): הכרטיס עושה זום אאוט, באותה גלילה התמונה שלו מתחלפת ב-fade, והחדשה בשחור לבן, אפקט שלישי ומינורי. העין מתקשה לקלוט מה קרה, וזה נראה WOW. לא חובה בכל מצב: אנימציה זו אמנות, ויש מקרים שזה יפריע. רק במה שרואים, לא במה שקוראים: מלל נכנס אחרי. הדוגמה: Kai Rennard של HorizonX, אצלנו UkMorph עם swap.
- דברים שנכנסים אחרי: מה שמגיע אחרי הכותרת נכנס בעצמו, כדי שלא הכול יגיע יחד.
- נשימה: בין מה שנעצר, סקשן רגיל וקצר שקוראים בגלילה רגילה, עם תמונה כהה שזזה בפרלקס.
- רקע נושם: יש נקודת מיקוד אחת, ומה שזז מאחוריה זז לאט יותר. אם הרקע זז באותה מהירות כמו מה שבפוקוס, הוא כבר לא רקע נושם אלא מתחרה בו (ScrollingText עם speed נמוך מ-1).
- איזון אפקטים, נשימה: עיקרון ולא חוק "שאחרי אנימציה יש חלק סטטי" (אבל יכול להיות). ב-Kai Rennard של HorizonX: hero שמעמיס על הגולש תנועה, ואחריו סקשן מלל רגיל בטיפוגרפיה גדולה, שיש לו רגע לעכל. זו גם האמנות: האיזון.
- אזורי חוויה ואזורי תוכן: מילה אחת על תמונה, לא נורא אם מפספסים אותה. אזור תוכן, עם אפקט או בלי, צריך זמן קריאה לפני שהוא נעלם: יותר גלילה ומרווח ביטחון.
- מעט מלל ב-fold. בסטיקי הכול צריך להיכנס ב-fold אחד: מלל ארוך יותר מקבל לרוב אזור עם גלילה רגילה.
- אינדיקטור על מה שנעצר, כדי שיראו כמה נשאר.
- טופס: מומלץ בפופאפ. גלילה לטופס בתחתית מריצה את האנימציה מהר, וזה לא נורא: גם תפריט אנקורים עושה את זה.
המנגנון
אין ציר זמן אחד לדף. כל סקשן מחזיק התקדמות משלו, מ-0 עד 1 לפי הגלילה, והשרשור הוא סדר הסקשנים. "שלוש שניות" הן פשוט עוד גלילה. שתי שכבות: אפקטים יציבים של הסקשנים עצמם, ובמקביל מנוע לתזוזה בתוך סקשן, לכל זמן שבוחרים. לא המצאנו כאן כלום, כל אפקט כזה ב-GSAP עובד ככה. מה שנוסף הוא השיטה.
| מה רוצים | מנגנון | איפה |
|---|---|---|
| דברים נכנסים בתזמון בתוך סקשן שעוצר | data-from data-at data-for | es-scripts/GSAP/puzzle_on_scroll.js |
| ערך אחד, בזמן שהאלמנט עובר במסך | data-movement data-scale data-scroll-rotate | es-scripts/GSAP/movement_animation.js |
| סקשן עולה מעל סקשן | <UkPushUnder length rise> | components/uikit/UkPushUnder |
| משהו מגיב להתקדמות של אפקט קיים | calc(var(--uk-shape-world-drift)) | components/uikit/UkShapeWorld |
| כניסה חד-פעמית כשמגיעים | trigger_box split | es-scripts/GSAP/trigger_box_animation.js |
איך כל זה בנוי מבפנים, כולל הנעילה בלי pin והפאזל: How it works.
עקרון: Match Cut
הפריים של סיום סצנה A הוא הפריים של פתיחת סצנה B. לרוב הפריים מתמלא בדבר אחד עד שנשאר רק צבע או צורה, ומתברר שזו הסצנה הבאה. נפוץ מאוד במעברים באנימציה.
- Rope של היצ'קוק: המצלמה נכנסת לגב של ז'קט כהה עד שכל הפריים שחור, ויוצאת ממנו אל הטייק הבא. זה בדיוק מילוי הפריים.
- 2001: אודיסיאה בחלל: עצם שנזרקת לאוויר נחתכת לחללית באותה צורה. בלי מילוי, רק הצורה מחברת.
- לורנס איש ערב: גפרור שנכבה נחתך לזריחה במדבר. גם כאן הצורה והאור מחברים.
- Of/Horse (רפרנס מהאתר): פריים 1, תמונה ממוסגרת של סוס על הקיר בחדר. פריים 2, זום אל תוך התמונה עד שהיא העולם כולו. המלל החי רק מתמקם, נכנס ויוצא.
אצלנו: Shape World, צורה שנפתחת ומה שבתוכה הוא הרקע החדש של העמוד.
