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

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

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

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

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

ในตัวอย่างก่อนหน้านี้ 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 เพื่อทดสอบการรองรับ animation-timeline ก่อนใช้ภาพเคลื่อนไหวที่ทำงานตามการเลื่อน เช่น

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

}

แหล่งข้อมูล

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

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

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