מקרים לדוגמה של אנימציות שמבוססות על גלילה

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

עם זאת, כחלק מתכונות ה-CSS וממשק המשתמש החדשות שמגיעות לדפדפנים, עכשיו אפשר ליצור אנימציות רספונסיביות שמבוססות על גלילה. בעזרת מושגים חדשים כמו צירי זמן של גלילה וצירי זמן של תצוגה, שמשלימים את Web Animations API‏ (WAAPI) ו-CSS Animations API הקיימים, אפשר עכשיו להציג אנימציות חלקות שמבוססות על גלילה בשרשור הראשי, עם רק כמה שורות קוד. במחקר המקרה הזה נסביר איך Tokopedia,‏ redBus ו-Policybazaar כבר נהנים מהתכונה החדשה הזו.

Tokopedia

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

הצלחנו לצמצם את מספר שורות הקוד שלנו ב-80% בהשוואה לשימוש באירועי גלילה רגילים של JavaScript, וגילינו שהשימוש הממוצע במעבד ירד מ-50% ל-2% בזמן הגלילה – Andy Wihalim, מהנדס תוכנה בכיר, 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 כדי להשיג את אותו אפקט.

תרחישים לדוגמה

גלריית תמונות עם הצגת תמונות (לנייד) ועם Cover Flow (למחשב).

קוד (נייד)

בדוגמה הקודמת, 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. בנוסף, קל מאוד ללמוד איך להשתמש ב-Google Analytics, ולכן הוא כלי חובה לכל אתר מסחר אלקטרוני. קיבלנו גם משוב חיובי ותמיכה מצוותים אחרים כדי לנצל את SDA בתהליכים נוספים של משתמשים. – אמיט קומר (Amit Kumar), מנהל תוכנה בכיר, redBus.

Policybazaar

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

בעזרת אנימציות שמתבססות על גלילה, הצלחנו למקסם את שטח שדה התצוגה כדי שהמשתמשים יוכלו להשוות בין תוכניות, וכך להבטיח חוויית קריאה ממוקדת ונקייה. – Rishabh Mehrotra, מנהל המחלקה לעיצוב ב-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‏ (דף פרטי המוצר)

שיקולים לשימוש ב-Scroll-driven Animations API

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

ב-CSS, אפשר להשתמש ב-@supports כדי לבדוק אם יש תמיכה ב-animation-timeline לפני שמשתמשים באנימציות שמבוססות על גלילה. לדוגמה:

@supports (animation-timeline: scroll()) {

}

משאבים

• דגמי אנימציות שמבוססות על גלילה
• אנימציה של רכיבים בזמן גלילה באמצעות אנימציות מבוססות-גלילה
• Codelab: תחילת העבודה עם אנימציות שמבוססות על גלילה ב-CSS
• תוסף ל-Chrome: תכונת ניפוי באגים של אנימציות שמבוססות על גלילה
• Scroll-timeline Polyfill
• רוצה לדווח על באג או על תכונה חדשה? חשוב לנו לשמוע ממך!

כדאי לעיין במאמרים האחרים בסדרה הזו, שבהם מוסבר איך חברות מסחר אלקטרוני נהנו מהשימוש בתכונות חדשות של CSS ושל ממשק משתמש, כמו מעבר בין תצוגות, חלון קופץ, שאילתות של קונטיינרים ובוחר has().

• למה יכולות ממשק המשתמש באינטרנט חשובות לאתר המסחר האלקטרוני שלכם?
• מקרים לדוגמה בנושא Transitions
• מקרים לדוגמה של Popup API
• מקרים לדוגמה של שאילתות בקונטיינרים
• מקרים לדוגמה של הבורר ‎:has()