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

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

ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนช่วยให้เราใช้พื้นที่ใน Viewport ได้อย่างเต็มที่เพื่อให้ผู้ใช้เปรียบเทียบแพ็กเกจต่างๆ ได้ ซึ่งช่วยให้ประสบการณ์การอ่านมีความชัดเจนและไม่รกหูรกตา —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 สำหรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนสำหรับเบราว์เซอร์ที่ไม่รองรับได้ เช่น Scroll-timeline polyfill หากคุณทำเช่นนั้น คุณจะต้องทำการทดสอบเพิ่มเติมเพื่อให้แน่ใจว่าการทำงานร่วมกับเฟรมเวิร์กเป็นไปด้วยดี และเบราว์เซอร์ที่ใช้ Polyfill จะไม่พบปัญหาเกี่ยวกับภาพเคลื่อนไหวหรือประสบการณ์การใช้งานที่ไม่ราบรื่น

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

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

แหล่งข้อมูล

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

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

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