אנימציות שמבוססות על גלילה הן דפוס חוויית משתמש נפוץ באינטרנט. אנימציה מבוססת גלילה מקושרת למיקום הגלילה של מאגר גלילה. המשמעות היא שכשגוללים למעלה או למטה, האנימציה המקושרת מחלצת קדימה או אחורה בתגובה ישירה. דוגמאות לכך הן אפקטים כמו תמונות רקע בצורת פרלקס או מחווני קריאה שנעים בזמן הגלילה.
בדרך כלל מפתחים יצרו אנימציות שמבוססות על גלילה באמצעות JavaScript כדי להגיב לאירועי גלילה ב-thread הראשי. לכן קשה ליצור אנימציות מבוססות-גלילה שמבצעות ביצועים שמסונכרנות עם הגלילה, בגלל שאירועי גלילה נשלחים באופן אסינכרוני, ולרוב הן מובילות לבעיות (jank) כי הן נמצאות ב-thread הראשי.
עם זאת, כחלק מהתכונות החדשות של CSS וממשק המשתמש שזמינות בדפדפנים, עכשיו תוכלו ליצור אנימציות מבוססות-הצהרות מוצהרות. באמצעות גלילה בצירי זמן וצפייה בקווי זמן, קונספטים חדשים שמשתלבים עם הממשק הקיים Web Animations API (WAAPI) ו-CSS Animations API, עכשיו אפשר להפעיל אנימציות חלקות מאוד של גלילה מה-thread הראשי, בעזרת כמה שורות קוד. מקרה לדוגמה שמראה איך Tokopedia, RedBus ו-Policybazaar כבר נהנים מהיתרונות של התכונה החדשה הזו.
טוקופדיה
Tokopedia החליפה את הטמעות ה-JavaScript המותאמות אישית הקודמות שלה באנימציות המבוססות על גלילה, כדי לבצע אופטימיזציה לביצועי הדפים ולשפר את חוויית הגלישה הכוללת במשפך ההמרות של המסחר האלקטרוני.
הצלחנו לצמצם עד 80% משורות הקוד שלנו בהשוואה לשימוש באירועי גלילה קונבנציונליים ב-JavaScript, וגילינו שהשימוש הממוצע במעבד (CPU) ירד מ-50% ל-2% במהלך הגלילה - אנדי ויהלים, מהנדס תוכנה בכיר, Tokopedia
קוד
ההטמעה הבאה משתמשת בפונקציה scroll()
כדי להגדיר ציר זמן אנונימי להתקדמות הגלילה כדי לשלוט בהתקדמות של אנימציית ה-CSS. החשיפה של הסרגל הדביק העליון משתנה בהתאם למיקום הגלילה ב-animationRange
המוגדר.
const toggleBar = keyframes({
to: { height: 48 },
});
export const cssWrapper = css({
position: 'fixed',
left: 0,
width: '100vw',
pointerEvents: 'none',
marginTop: 120,
height: 0,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
animation: `${toggleBar} linear both`,
animationTimeline: 'scroll()',
animationRange: '20px 70px',
});
redBus
בדף הנחיתה של RedBus יש אנימציות שונות לנייד ולמחשב בדף הנחיתה של דברים שאפשר לעשות, שמוצג בתחילת משפך ההמרות לכל המשתמשים. בעזרת אנימציות מבוססות-גלילה, הם הצליחו להחליף את יישומי ה-JavaScript המותאמים אישית ב-CSS כדי להשיג את אותה השפעה.
תרחישים לדוגמה
גלריית תמונות עם הצגת תמונות (למכשירים ניידים) ותהליך כיסוי (למחשבים).
קוד (בנייד)
בדוגמה הקודמת, Tokopedia השתמשה בציר הזמן האנונימי להתקדמות הגלילה. בקוד הבא, RedBus משתמש בציר הזמן של התקדמות התצוגה בעלת השם. האנימציה משנה את opacity
ואת clip-path
של הרכיב <img>
בתוך animation-range
המוגדר, בתוך פס הגלילה הקרוב ביותר של האלמנט, שהוא הגלילה בגלריית התמונות.
const reveal = keyframes`
from {
opacity: 0;
clip-path: inset(45% 20% 45% 20%);
}
to {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
}`
const CardImage = styled.div`
width: 100%;
height: 100%;
img {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
height: 100%;
width: 100%;
object-fit: cover;
view-timeline-name: --revealing-image;
view-timeline-axis: block;
/* Attach animation, linked to the View Timeline */
animation: linear ${reveal} both;
animation-timeline: --revealing-image;
/* Tweak range when effect should run*/
animation-range: entry 25% cover 50%;
}
`;
אנחנו שמחים מאוד לראות את התכונה הזו, מפני שהיא שילוב מושלם של ביצועים עם חוויה טובה יותר, המשפרת את האותות של חוויית השימוש בדפים שלנו ל-SEO. בנוסף, עקומת הלמידה המינימלית הופכת את התוכנית לחובה בכל אתר מסחר אלקטרוני. כמו כן, קיבלנו משוב חיובי ותמיכה מצוותים אחרים, כדי להשתמש ב-SDA כדי לשפר את התהליכים שעוברים המשתמשים. אמיט קומאר, מנהל הנדסה בכיר, RedBus.
Policybazaar
השוואה בין תוכניות ביטוח היא פעולה חשובה שחוזרת על ידי המשתמשים, כדי להנחות אותם בתהליך קבלת ההחלטות. באמצעות אנימציות המבוססות על גלילה, Policybazaar מכווץ את גודל הרכיבים בעדיפות נמוכה בתגובה שהמשתמש גולל בטבלה. כתוצאה מכך, חוויית הגלילה החיננית משפרת את הקריאות.
בעזרת אנימציות מבוססות-גלילה, הצלחנו להרחיב את אזור התצוגה שבו המשתמשים יוכלו להשוות בין תוכניות, וכך להבטיח חוויית קריאה ממוקדת ולא עמוסה. רישבה מהרוטרה, ראש מחלקת העיצוב של ביטוח חיים BU, PolicyBazaar.
קוד
בדומה לדוגמה הקודמת מ-Tokopedia, ב-Policybazaar נעשה שימוש בפונקציה scroll()
כדי להגדיר ציר זמן אנונימי של התקדמות גלילה לשליטה בהתקדמות של אנימציית ה-CSS. במקרה כזה, כיווץ גודל הגופן ועמעום הכותרת בהתאם למיקום הגלילה ב-animation-range
המוגדר.
@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}
@keyframes move-and-fade-header {
to {
translate: 0% -5%;
top:103px;
}
}
@keyframes shrink-name {
to {
font-size: 1.5rem;
}
}
אנימציות שמבוססות על גלילה כדפוס נפוץ לאורך התהליך שעובר המשתמש
כל חברות המסחר האלקטרוני המומלצות השתמשו באנימציות מבוססות-גלילה בדפים עם כרטיסים, והנפשו כרטיסים כדי למשוך את תשומת הלב של המשתמש אליהם . בדוגמאות הבאות מוצגות השפעות של גלילה בכרטיסים בחלקים שונים של המסע של המשתמש. בדרך כלל אפשר לעשות זאת באמצעות ציר זמן אנונימי של התקדמות הצפייה כדי לשלוט בהתקדמות של אנימציית ה-CSS המותאמת אישית, כפי שמוצג בקטע הקוד הבא של CSS.
@keyframes animate-in {
0% { opacity: 0; transform: translateY(10%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10%); }
}
.flyin_animate {
animation: animate-in linear forwards;
animation-timeline: view();
animation-range: entry;
}
RedBus (דף הבית)
Policybazaar (דף פרטי מוצר)
Tokopedia (דף פרטי מוצר)
דברים שחשוב להביא בחשבון כשמשתמשים ב-API של אנימציה שמבוססת על גלילה
אפשר לבצע מילוי polyfill של אנימציות מבוססות-גלילה בדפדפנים שאין בהם תמיכה, למשל באמצעות polyfill עם גלילה בציר הזמן. אם עושים זאת, יש לבצע בדיקות נוספות כדי לוודא שהוא פועל היטב לצד ה-framework, ושדפדפנים שמשתמשים ב-polyfill לא יחוו כשל באנימציה או חוויות קוטעות.
בשירות CSS אפשר להשתמש ב-@supports
כדי לבדוק תמיכה בציר הזמן של האנימציה, לפני שמשתמשים באנימציות מבוססות גלילה. למשל:
@supports (animation-timeline: scroll()) {
}
משאבים
- הדגמות של אנימציות המבוססות על גלילה
- אנימציה של רכיבים בגלילה באמצעות אנימציות שמבוססות על גלילה
- Codelab: תחילת העבודה עם אנימציות מבוססות גלילה ב-CSS
- תוסף ל-Chrome: כלי לניפוי באגים באנימציה מבוססת גלילה
- Polyfill עם קו זמן לגלילה
- האם ברצונך לדווח על באג או על תכונה חדשה? אנחנו רוצים לשמוע ממך!
אפשר לעיין במאמרים אחרים בסדרה הזו, שבהם מוסבר על היתרונות שחברות מסחר אלקטרוני נהנו בזכות השימוש בתכונות חדשות ב-CSS ובממשק המשתמש, כמו מעברים בין תצוגות מפורטות, חלון קופץ, שאילתות בקונטיינר והבורר has()
.