ภาพเคลื่อนไหวที่ใช้การเลื่อน เป็นรูปแบบ UX ทั่วไปบนเว็บ ภาพเคลื่อนไหวที่เกิดจากการเลื่อนจะลิงก์กับตำแหน่งการเลื่อนของคอนเทนเนอร์การเลื่อน ซึ่งหมายความว่าเมื่อคุณเลื่อนขึ้นหรือลง ภาพเคลื่อนไหวที่ลิงก์จะสครับไปข้างหน้าหรือถอยหลังในการตอบกลับโดยตรง ตัวอย่างของลักษณะนี้คือเอฟเฟกต์อย่างเช่นภาพพื้นหลังพารัลแลกซ์ หรือสัญญาณบอกสถานะการอ่านซึ่งเคลื่อนไหวขณะที่คุณเลื่อน
โดยทั่วไปนักพัฒนาซอฟต์แวร์ได้สร้างภาพเคลื่อนไหวแบบเลื่อนโดยใช้ JavaScript เพื่อตอบสนองต่อเหตุการณ์การเลื่อนในเทรดหลัก ซึ่งทำให้การสร้างภาพเคลื่อนไหวจากการเลื่อนที่มีประสิทธิภาพซึ่งซิงค์กับการเลื่อนทำได้ยาก เนื่องจากการส่งเหตุการณ์การเลื่อนเกิดขึ้นแบบไม่พร้อมกันและมักจะนำไปสู่ปัญหาการกระตุกเพราะอยู่ในเทรดหลัก
อย่างไรก็ตาม ในฟีเจอร์ CSS และ UI ใหม่ที่เปิดตัวในเบราว์เซอร์ ตอนนี้คุณสามารถสร้างภาพเคลื่อนไหวแบบเลื่อนแบบประกาศข้อความได้แล้ว ไทม์ไลน์ในการเลื่อนและดูไทม์ไลน์ ซึ่งเป็นแนวคิดใหม่ที่ผสานรวมกับ Web Animations API (WAAPI) และ CSS Animations API ที่มีอยู่ ตอนนี้คุณสามารถทำได้แล้วสร้างภาพเคลื่อนไหวแบบเลื่อนที่ไหลลื่นซึ่งทำงานจากเทรดหลักโดยใช้โค้ดเพียงไม่กี่บรรทัด ในกรณีศึกษานี้ มาดูว่า Tokopedia, redBus และ Policybazaar ได้รับประโยชน์จากฟีเจอร์ใหม่นี้อย่างไร
โทโกพีเดีย
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
แกลเลอรีรูปภาพที่มีการเปิดเผยรูปภาพ (สำหรับอุปกรณ์เคลื่อนที่) และขั้นตอนการหน้าปก (สำหรับเดสก์ท็อป)
โค้ด (อุปกรณ์เคลื่อนที่)
ในตัวอย่างก่อนหน้านี้ 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
รหัส
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 (หน้ารายละเอียดผลิตภัณฑ์)
สิ่งที่ควรพิจารณาเมื่อใช้ Animations API ที่ขับเคลื่อนด้วยการเลื่อน
เป็นไปได้ที่จะทำภาพเคลื่อนไหวแบบเลื่อนแบบ Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับ เช่น โดยใช้ Polyfill สำหรับไทม์ไลน์การเลื่อน เมื่อเปลี่ยนแล้ว จะต้องมีการทดสอบเพิ่มเติมเพื่อให้แน่ใจว่าจะทํางานได้ดีกับเฟรมเวิร์กของคุณ และเบราว์เซอร์ที่ใช้ Polyfill ต้องไม่ประสบปัญหาภาพเคลื่อนไหวล้มเหลวหรือประสบปัญหาที่ไม่ดี
จาก CSS คุณสามารถใช้ @supports
เพื่อทดสอบการรองรับไทม์ไลน์ของภาพเคลื่อนไหวก่อนใช้ภาพเคลื่อนไหวแบบเลื่อน เช่น
@supports (animation-timeline: scroll()) {
}
แหล่งข้อมูล
- การสาธิตภาพเคลื่อนไหวแบบเลื่อน
- ทำให้องค์ประกอบเคลื่อนไหวขณะเลื่อนด้วยภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน
- Codelab: การเริ่มต้นใช้งานภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนใน CSS
- ส่วนขยาย Chrome: โปรแกรมแก้ไขข้อบกพร่องของภาพเคลื่อนไหวที่ใช้การเลื่อน
- Polyfill เส้นบอกลำดับเวลาแบบเลื่อน
- คุณต้องการรายงานข้อบกพร่องหรือฟีเจอร์ใหม่ เราอยากฟังความคิดเห็นจากคุณ
อ่านบทความอื่นๆ ในชุดนี้ซึ่งพูดถึงประโยชน์ในการใช้ฟีเจอร์ CSS และ UI ใหม่ๆ ของบริษัทอีคอมเมิร์ซ เช่น ดูการเปลี่ยนผ่าน, ป๊อปอัป, คำค้นหาคอนเทนเนอร์ และตัวเลือก has()