การสร้างภาพเคลื่อนไหวแคโรเซลเลื่อนแบบไม่สิ้นสุดด้วย CSS เท่านั้น

แนะนำ#

พวกเราชอบ JavaScript แน่นอน แต่สนุกเสมอที่จะดูว่าเราสามารถทำอะไรได้ด้วย CSS เพียงอย่างเดียว โดยเฉพาะเมื่อพูดถึงภาพเคลื่อนไหว เนื่องจากภาพเคลื่อนไหวด้วย CSS มักจะ "ไม่หนัก" เท่ากับภาพเคลื่อนไหวด้วย JavaScript

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

สร้างแถวของการ์ด#

ก่อนอื่น ลองสร้างโครงสร้างพื้นฐานของแคโรเซลของเรา พิจารณาแถวของการ์ด:

ดูดีใช่ไหม? การ์ดสามารถเป็นป้ายโฆษณาสวยๆ รูปภาพสินค้า หรือสิ่งที่คุณต้องการแสดงในแคโรเซลของคุณ

ทำซ้ำการ์ด#

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

ลองดูผลลัพธ์:

เห็นเฉพาะชุดแรกของการ์ดเท่านั้น หากคุณตรวจสอบ HTML คุณจะเห็นว่าชุดที่สองของการ์ดถูกซ่อนและตามหลังชุดแรก

ทำการเลื่อนแคโรเซลเป็นภาพเคลื่อนไหว#

ถึงเวลาทำให้แคโรเซลเคลื่อนไหว! เนื่องจากเรามีสองชุดของการ์ดที่เชื่อมต่อกัน เราสามารถทำให้แคโรเซลเคลื่อนไหวได้ด้วยการเปลี่ยนกลุ่มการ์ด นี่คือวิธี:

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

แค่นั้นแหละ! 🎊 ตอนนี้แคโรเซลจะหยุดเมื่อคุณนำเมาส์ไปวางบน

ความคิดสุดท้าย#

CSS มีความสามารถที่ทรงพลัง และสนุกเสมอที่จะสำรวจว่าเราสามารถทำอะไรได้ด้วยมัน นอกจากนี้ยังมีคุณสมบัติ CSS อื่น ๆ เช่น scroll-snap-type และ scroll-snap-align ที่สามารถช่วยให้คุณสร้างแคโรเซลแบบโต้ตอบได้ สนุกกับการเขียนโค้ด! 🚀