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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

อย่างไรก็ตาม ในฐานะส่วนหนึ่งของ ฟีเจอร์ CSS และ UI ในเบราว์เซอร์ ตอนนี้ สร้างภาพเคลื่อนไหวแบบเลื่อนตามการประกาศ ใช้ไทม์ไลน์แบบเลื่อนและมุมมอง ไทม์ไลน์ แนวคิดใหม่ที่ผสานรวมกับ Web Animations API (WAAPI) และ CSS Animations API ตอนนี้คุณก็นุ่มนวลละมุนแล้ว ภาพเคลื่อนไหวแบบเลื่อนที่ขับเคลื่อนด้วยการเลื่อนออกจากเทรดหลัก โดยมีเพียง 2-3 บรรทัด โค้ด ในกรณีศึกษานี้ มาดูวิธีที่ 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 ซึ่งแสดง กับผู้ใช้ทั้งหมดในช่วงต้นของ Conversion Funnel สำหรับภาพเคลื่อนไหวที่เลื่อนได้ สามารถเปลี่ยนการใช้งาน JavaScript ที่กำหนดเองเหล่านี้ด้วย CSS เพื่อให้ แบบเดียวกัน

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

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

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

ในตัวอย่างก่อนหน้านี้ 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 จะลดขนาด ขนาดขององค์ประกอบที่มีลำดับความสำคัญต่ำเพื่อเป็นการตอบสนองต่อผู้ใช้ที่เลื่อนตาราง ช่วงเวลานี้ ส่งผลให้ประสบการณ์การเลื่อน ราบรื่นในขณะที่ปรับปรุงให้อ่านง่ายขึ้น

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

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

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

คุณอาจสร้างภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนแบบ Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับ ตัวอย่างเช่น Scroll-Timeline Polyfill หากคุณทำเช่นนั้น การดำเนินการนี้จะ และต้องอาศัยการทดสอบเพิ่มเติม เพื่อให้แน่ใจว่าโฆษณาได้ผลดีควบคู่กับ และเบราว์เซอร์ที่ใช้ Polyfill ไม่พบภาพเคลื่อนไหว ล้มเหลวหรือแย่

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

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

}

แหล่งข้อมูล

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

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

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