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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

גלריית תמונות עם הצגת תמונות (לנייד) ועם 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%;
   }
`;

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

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

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

}

משאבים

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

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

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