สร้างภาพเคลื่อนไหวแคโรเซลเลื่อนแบบไม่สิ้นสุดด้วยการหยุดชั่วคราวเมื่อวางเมาส์โดยใช้ CSS เท่านั้น ไม่ต้องใช้ JavaScript
พวกเราชอบ JavaScript แน่นอน แต่สนุกเสมอที่จะดูว่าเราสามารถทำอะไรได้ด้วย CSS เพียงอย่างเดียว โดยเฉพาะเมื่อพูดถึงภาพเคลื่อนไหว เนื่องจากภาพเคลื่อนไหวด้วย CSS มักจะ "ไม่หนัก" เท่ากับภาพเคลื่อนไหวด้วย JavaScript
ในโพสต์นี้ ฉันจะแสดงวิธีสร้างภาพเคลื่อนไหวแคโรเซลการเลื่อนแบบไม่สิ้นสุดพร้อมเอฟเฟกต์หยุดพักเมื่อวางเมาส์ โดยใช้ CSS เท่านั้น นี่คือตัวอย่างของสิ่งที่เราจะสร้าง:
ก่อนอื่น ลองสร้างโครงสร้างพื้นฐานของแคโรเซลของเรา พิจารณาแถวของการ์ด:
ดูดีใช่ไหม? การ์ดสามารถเป็นป้ายโฆษณาสวยๆ รูปภาพสินค้า หรือสิ่งที่คุณต้องการแสดงในแคโรเซลของคุณ
เนื่องจากเราต้องการให้แคโรเซลเป็นแบบไม่สิ้นสุด จึงควรเชื่อมต่อปลายท้ายกัน สัญชาตญาณเราจะลองทำการทำซ้ำการ์ด:
ลองดูผลลัพธ์:
เห็นเฉพาะชุดแรกของการ์ดเท่านั้น หากคุณตรวจสอบ HTML คุณจะเห็นว่าชุดที่สองของการ์ดถูกซ่อนและตามหลังชุดแรก
ถึงเวลาทำให้แคโรเซลเคลื่อนไหว! เนื่องจากเรามีสองชุดของการ์ดที่เชื่อมต่อกัน เราสามารถทำให้แคโรเซลเคลื่อนไหวได้ด้วยการเปลี่ยนกลุ่มการ์ด นี่คือวิธี:
เรายังคงมีอีกหนึ่งสิ่งที่จะเพิ่ม: หยุดใช้ภาพเคลื่อนไหวเมื่อวางเมาส์เหนือแคโรเซล นี่จะช่วยให้ผู้ใช้มีโอกาสในการชมเนื้อหาได้ชัดเจนขึ้น เนื่องจากเรามีสองชุดของการ์ด เราจำเป็นต้องหยุดทั้งสองกลุ่มเมื่อนำเมาส์ไปวางเหนือแคโรเซล:
แค่นั้นแหละ! 🎊 ตอนนี้แคโรเซลจะหยุดเมื่อคุณนำเมาส์ไปวางบน
CSS มีความสามารถที่ทรงพลัง และสนุกเสมอที่จะสำรวจว่าเราสามารถทำอะไรได้ด้วยมัน นอกจากนี้ยังมีคุณสมบัติ CSS อื่น ๆ เช่น scroll-snap-type และ scroll-snap-align ที่สามารถช่วยให้คุณสร้างแคโรเซลแบบโต้ตอบได้ สนุกกับการเขียนโค้ด! 🚀