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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

עם זאת, במסגרת התכונות החדשות של CSS וממשק המשתמש שנוספו לדפדפנים, עכשיו אפשר ליצור אנימציות הצהרתיות שמבוססות על גלילה. עם Scroll Timelines ו-View Timelines, מושגים חדשים שמשולבים עם 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 יש אנימציות שונות לנייד ולמחשב בדף הנחיתה things-to-do, שמוצג לכל המשתמשים בשלב מוקדם במשפך ההמרה. בעזרת אנימציות מבוססות גלילה, הם הצליחו להחליף את ההטמעות המותאמות אישית של JavaScript ב-CSS כדי להשיג את אותו אפקט.

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

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

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

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

נקודות למחשבה כשמשתמשים ב-Scroll-driven Animations API

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

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

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

}

משאבים

• הדגמות של אנימציות מבוססות גלילה
• הנפשת אלמנטים בגלילה באמצעות אנימציות מבוססות-גלילה
• Codelab: Getting started with scroll-driven animations in CSS
• תוסף ל-Chrome: כלי לניפוי באגים של אנימציה מבוססת גלילה
• Scroll-timeline Polyfill
• רוצה לדווח על באג או על תכונה חדשה? נשמח לשמוע מכם!

מומלץ לעיין במאמרים האחרים בסדרה הזו, שבהם מוסבר איך חברות מסחר אלקטרוני נהנו משימוש בתכונות חדשות של CSS וממשק משתמש, כמו View Transitions,‏ Popover,‏ Container Queries והבורר has().

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