Animation กับ CSS Sprite

คราวก่อนนู้นได้พูดถึง CSS Sprite ทำให้ผมนึกถึงเกมขึ้นมา (เพราะคำว่า Sprite นี่แหละครับ – Sprite หมายถึงภาพตัวละครที่เรียงต่อกันในลักษณะเฟรม เมื่อนำมา Animate ให้เป็นภาพเดียว จะได้ภาพเคลื่อนไหว) ครั้งนี้ก็เลยหยิบเรื่อง CSS Sprite มาพูดต่อละกัน และแน่นอนครั้งนี้เราจะพูดถึงเรื่องการทำ Sprite Animation ด้วย CSS Sprite ครับ

อย่างที่เคยอธิบายไปแล้ว หลักการของการทำ CSS Sprite คือการกำหนดค่า Stylesheet ของ background-image และ background-position ให้มีเป็นภาพที่ตำแหน่งที่เราต้องการ และเราก็ใช้ container เช่น div มากำหนดขอบเขตที่จะแสดง ที่เหลือก็เป็นการนำ function ของ javascript ที่ชื่อว่า setTimeout มาทำให้ภาพเคลื่อนไหวได้เท่านั้นเองครับ ดูง่ายใช่มั๊ยครับ

ลองไปดู LIVE DEMO กันเลยครับ