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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

תמיכה בדפדפנים

• 115
• 115
• 
• x

מקור

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

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 ולקבל את אותו האפקט.

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

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

אפקט של חשיפת תמונה באמצעות אנימציה מונעת-גלילה לטעינה של תמונות בגלריה 'דברים שאפשר לעשות' ב-redBus.

קוד (נייד)

בדוגמה הקודמת, 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 כדי להרחיב את התהליכים שעוברים המשתמשים. אמיט קומאר (Amit Kumar), מנהל הנדסה בכיר, RedBus.

Policybazaar

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

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

אנימציה animate-timeline שמופיעה בזמן הגלילה בטבלה של השוואת התוכניות בתחום העסקי 'השקעות' ו'ביטוח חיים'.

קוד

בדומה לדוגמה הקודמת מ-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 (דף הבית)

אנימציה מבוססת גלילה מהירה לטעינת כרטיסי מוצר בדף הנחיתה של 'דברים שאפשר לעשות' ב-redBus.

Policybazaar (דף פרטי מוצר)

אנימציה מבוססת-גלילה של כרטיסי מוצרים שמופיעים בהדרגה ונעלמים בהדרגה בתחומי העסק (LOB) 'השקעות' ו'ביטוח חיים'.

Tokopedia‏ (דף פרטי המוצר)

אנימציה של מעבר מכהה לבהיר ומבהיר לכהה בזמן גלילה בין המוצרים שמפורטים.

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

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

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

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

}

משאבים

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

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

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