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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

Tokopedia

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

הצלחנו להפחית עד 80% משורות הקוד בהשוואה לשימוש באירועי גלילה רגילים ב-JavaScript, וגילינו שהשימוש הממוצע במעבד ירד מ-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. בנוסף, קל ללמוד איך להשתמש ב-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 (דף פרטי המוצר)

דברים שכדאי לקחת בחשבון כשמשתמשים ב-API של אנימציות מבוססות-גלילה

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

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

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

}

משאבים

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

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

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