กรณีศึกษาเกี่ยวกับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน

Swetha Gopalakrishnan

Saurabh Rajpal

ภาพเคลื่อนไหวที่ทำงานตามการเลื่อนเป็นรูปแบบ UX ที่ใช้กันทั่วไปบนเว็บ ภาพเคลื่อนไหวที่ทำงานตามการเลื่อนจะเชื่อมโยงกับตําแหน่งการเลื่อนของคอนเทนเนอร์การเลื่อน ซึ่งหมายความว่าเมื่อคุณเลื่อนขึ้นหรือลง ภาพเคลื่อนไหวที่ลิงก์จะกรอไปข้างหน้าหรือถอยหลังเพื่อตอบสนองโดยตรง ตัวอย่างของเอฟเฟกต์นี้ ได้แก่ พื้นหลังแบบพารัลแลกซ์ หรือตัวบ่งชี้การอ่านที่เคลื่อนไหวขณะที่คุณเลื่อน

โดยทั่วไปนักพัฒนาซอฟต์แวร์จะสร้างภาพเคลื่อนไหวที่ทำงานตามการเลื่อนโดยใช้ JavaScript เพื่อตอบสนองต่อเหตุการณ์การเลื่อนในเธรดหลัก ซึ่งทำให้สร้างภาพเคลื่อนไหวที่ทำงานได้ดีซึ่งทำงานตามการเลื่อนและซิงค์กับการเลื่อนได้ยาก เนื่องจากระบบจะส่งเหตุการณ์การเลื่อนแบบไม่พร้อมกัน และมักทำให้เกิดอาการกระตุกเนื่องจากอยู่ในเธรดหลัก

อย่างไรก็ตาม ฟีเจอร์ CSS และ UI ใหม่ในเบราว์เซอร์ช่วยให้คุณสร้างภาพเคลื่อนไหวที่ทำงานตามการเลื่อนแบบประกาศได้แล้ว ไทม์ไลน์การเลื่อนและไทม์ไลน์มุมมองเป็นแนวคิดใหม่ที่ผสานรวมกับ Web Animations API (WAAPI) และ CSS Animations API ที่มีอยู่ ซึ่งจะช่วยให้คุณสร้างภาพเคลื่อนไหวที่ราบรื่นซึ่งทำงานจากเธรดหลักได้โดยใช้โค้ดเพียงไม่กี่บรรทัด ในกรณีศึกษานี้ มาดูว่า Tokopedia, RedBus และ Policybazaar ได้รับประโยชน์จากฟีเจอร์ใหม่นี้อย่างไร

Tokopedia

Tokopedia ได้แทนที่การใช้งาน JavaScript ที่กำหนดเองก่อนหน้านี้ด้วยภาพเคลื่อนไหวแบบเลื่อนเพื่อเพิ่มประสิทธิภาพการทำงานของหน้าเว็บ และปรับปรุงประสบการณ์การท่องเว็บโดยรวมใน Funnel Conversion ของอีคอมเมิร์ซ

เราลดจำนวนบรรทัดโค้ดได้สูงสุด 80% เมื่อเทียบกับการใช้เหตุการณ์การเลื่อน JavaScript แบบดั้งเดิม และพบว่าการใช้งาน CPU เฉลี่ยลดลงจาก 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 มีภาพเคลื่อนไหวที่แตกต่างกันสําหรับอุปกรณ์เคลื่อนที่และเดสก์ท็อปในหน้า Landing Page กิจกรรมน่าสนใจ ซึ่งแสดงในช่วงต้นของ Funnel Conversion ต่อผู้ใช้ทุกคน เมื่อใช้ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน ทีมจึงสามารถแทนที่การใช้งาน JavaScript ที่กําหนดเองเหล่านี้ด้วย CSS เพื่อให้ได้ผลลัพธ์เดียวกัน

กรณีการใช้งาน

แกลเลอรีรูปภาพที่มีการเปิดเผยรูปภาพ (สำหรับอุปกรณ์เคลื่อนที่) และภาพสไลด์ (สำหรับเดสก์ท็อป)

โค้ด (อุปกรณ์เคลื่อนที่)

ในตัวอย่างก่อนหน้านี้ Tokopedia ใช้ anonymous scroll progress timeline ในโค้ดต่อไปนี้ 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 หัวหน้าทีมออกแบบของ BU ประกันชีวิต PolicyBazaar

รหัส

Policybazaar ใช้ฟังก์ชัน scroll() เพื่อตั้งค่าไทม์ไลน์ความคืบหน้าการเลื่อนแบบไม่ระบุชื่อสำหรับการควบคุมความคืบหน้าของภาพเคลื่อนไหว CSS ซึ่งคล้ายกับตัวอย่างก่อนหน้านี้จาก Tokopedia ในกรณีนี้ จะเป็นการย่อขนาดแบบอักษรและทำให้ส่วนหัวจางลงตามตำแหน่งการเลื่อนภายใน 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 คุณจะต้องทำการทดสอบเพิ่มเติมเพื่อให้แน่ใจว่า polyfill ทำงานร่วมกับเฟรมเวิร์กได้ดี และเบราว์เซอร์ที่ใช้ polyfill จะไม่พบปัญหาเกี่ยวกับภาพเคลื่อนไหวหรือประสบการณ์การใช้งานที่กระตุก

ใน CSS คุณสามารถใช้ @supports เพื่อทดสอบการรองรับไทม์ไลน์ของภาพเคลื่อนไหวก่อนใช้ภาพเคลื่อนไหวแบบเลื่อน เช่น

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

}

แหล่งข้อมูล

• เดโมภาพเคลื่อนไหวที่ทำงานตามการเลื่อน
• ทำให้องค์ประกอบเคลื่อนไหวขณะเลื่อนด้วยภาพเคลื่อนไหวแบบเลื่อน
• Codelab: เริ่มต้นใช้งานภาพเคลื่อนไหวที่ทำงานตามการเลื่อนใน CSS
• ส่วนขยาย Chrome: โปรแกรมแก้ไขข้อบกพร่องของภาพเคลื่อนไหวแบบเลื่อน
• Polyfill ไทม์ไลน์การเลื่อน
• คุณต้องการรายงานข้อบกพร่องหรือฟีเจอร์ใหม่ไหม เราอยากฟังความคิดเห็นจากคุณ

อ่านบทความอื่นๆ ในชุดนี้ ซึ่งกล่าวถึงประโยชน์ที่บริษัทอีคอมเมิร์ซได้รับจากการใช้ฟีเจอร์ใหม่ของ CSS และ UI เช่น ดูการเปลี่ยนภาพ, ป๊อปอัป, การค้นหาคอนเทนเนอร์ และตัวเลือก has()

• เหตุใดความสามารถของ UI ของเว็บจึงสำคัญต่อเว็บไซต์อีคอมเมิร์ซ
• ดูกรณีศึกษาของ Transitions
• กรณีศึกษาของ Popover API
• กรณีศึกษาเกี่ยวกับคำค้นหาของคอนเทนเนอร์
• กรณีศึกษาเกี่ยวกับตัวเลือก:has()