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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

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

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

การรองรับเบราว์เซอร์

  • Chrome: 115
  • Edge: 115
  • Firefox: อยู่หลังธง
  • Safari: ไม่รองรับ

แหล่งที่มา

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 เพื่อให้ได้ผลลัพธ์เดียวกัน

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

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

เอฟเฟกต์การเลื่อนรูปภาพแบบเคลื่อนไหวเพื่อแสดงรูปภาพที่โหลดในแกลเลอรี "กิจกรรมน่าสนใจ" ของ redBus

รหัส (อุปกรณ์เคลื่อนที่)

ในตัวอย่างก่อนหน้านี้ 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

ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน animate-timeline ในตารางการเปรียบเทียบแผนใน LOB (สายธุรกิจ) การลงทุนและประกันชีวิต

รหัส

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 (หน้าแรก)

เอฟเฟกต์ภาพเคลื่อนไหวแบบเลื่อนเข้าสำหรับโหลดการ์ดผลิตภัณฑ์ในหน้า Landing Page "กิจกรรมน่าสนใจ" ของ redBus

Policybazaar (หน้าข้อมูลผลิตภัณฑ์)

ภาพเคลื่อนไหวแบบเลื่อนขึ้นและเลื่อนลงของการ์ดผลิตภัณฑ์ใน LOB การลงทุนและประกันชีวิต

Tokopedia (หน้ารายละเอียดผลิตภัณฑ์)

ภาพเคลื่อนไหวที่ค่อย ๆ ปรากฏขึ้นและค่อย ๆ หายไปขณะเลื่อนดูผลิตภัณฑ์ที่แสดง

สิ่งที่ควรพิจารณาเมื่อใช้ Scroll-driven Animations API

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

จาก CSS คุณสามารถใช้ @supports เพื่อทดสอบการรองรับ animation-timeline ก่อนใช้ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน เช่น

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

}

แหล่งข้อมูล

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