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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

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

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

การสนับสนุนเบราว์เซอร์

  • 115
  • 115
  • x

แหล่งที่มา

โทโกพีเดีย

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

Use Case

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

ภาพเคลื่อนไหวแบบเลื่อนผ่านช่วยเผยให้เห็นเอฟเฟกต์สำหรับการโหลดรูปภาพ "Things To Do" ของ RedBus

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

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

เราดีใจมากที่ได้เห็นฟีเจอร์นี้เป็นส่วนผสมที่ลงตัวระหว่างประสิทธิภาพกับประสบการณ์การใช้งานที่ดียิ่งขึ้น ซึ่งช่วยเพิ่มสัญญาณของประสบการณ์การใช้งานหน้าเว็บสำหรับ SEO ยิ่งไปกว่านั้น เส้นโค้งการเรียนรู้ที่น้อยที่สุดยังช่วยให้เว็บไซต์อีคอมเมิร์ซแต่ละเว็บเป็นสิ่งที่ขาดไม่ได้ เรายังได้รับความคิดเห็นเชิงบวกและการสนับสนุนจากทีมอื่นๆ ให้ใช้ประโยชน์จาก SDA สำหรับเส้นทางของผู้ใช้มากขึ้นอีกด้วย Amit Kumar ผู้จัดการอาวุโสฝ่ายวิศวกรรมของ redBus

นโยบายบาซาร์

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

ภาพเคลื่อนไหวจากการเลื่อนช่วยให้เราขยายวิวพอร์ตให้กับผู้ใช้ได้อย่างเต็มศักยภาพในการเปรียบเทียบแพ็กเกจ เพื่อมอบประสบการณ์การอ่านได้อย่างตรงจุดและไม่รกสายตา Rishabh Mehrotra หัวหน้าฝ่ายออกแบบสำหรับ Life Insurance 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 (หน้ารายละเอียดผลิตภัณฑ์)

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

สิ่งที่ควรพิจารณาเมื่อใช้ Animations API ที่ขับเคลื่อนด้วยการเลื่อน

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

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

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

}

แหล่งข้อมูล

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