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

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%;
   }
`;

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

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

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

}

משאבים

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

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

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