jQuery, Ajax, PHP, JSON, XML, Web Technologies » Animation http://blog.chonla.com คุยกันเรื่อง jQuery, Ajax, PHP, JSON, XML และ Web Technologies เป็นภาษาไทยกันดีกว่า Wed, 08 Sep 2010 19:28:16 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Animation กับ CSS Sprite http://blog.chonla.com/2008/10/animation-%e0%b8%81%e0%b8%b1%e0%b8%a2-css-sprite/ http://blog.chonla.com/2008/10/animation-%e0%b8%81%e0%b8%b1%e0%b8%a2-css-sprite/#comments Wed, 29 Oct 2008 17:36:55 +0000 chonla http://blog.chonla.com/?p=73 คราวก่อนนู้นได้พูดถึง 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 กันเลยครับ

Share/Bookmark

]]> http://blog.chonla.com/2008/10/animation-%e0%b8%81%e0%b8%b1%e0%b8%a2-css-sprite/feed/ 1