แอนิเมชั่น jQuery ....

เมื่อท่านทำมาถึงตอนนี้ แล้วลองรันดูนะครับ ท่านจะได้เห็นก้อนเมฆค่อยๆลอยเคลื่อนตัวไปทางซ้าย บนท้องฟ้า ที่สำคัญ ไม่กระตุกนะเฮีย

เอาละสร้างฉากหลังเสร็จแล้ว ถ้าไม่มีอะไรลอยๆอยู่เหนือก้อนเมฆสักหน่อย ก็ดูเหมือนจะขาดชีวิตชีวา

5. เพิ่ม div ขึ้นมาอีกตัว เพื่อทำบอลลูน

โค๊ด: [Select]

6. ตกแต่งสีสรร

โค๊ด: [Select]

#balloon {
background:url("balloon.png") no-repeat scroll left top transparent;
height:118px;
width:82px;
position:absolute;
}

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

height ให้มีขนาดเท่ากับความสูงของภาพ
width ให้มีขนาด เศษ 1 ส่วน 3 ของภาพ ก็เพราะมันมี 3 ภาพ ใน 1 ภาพ (อธิบายได้ไม่งงเนอะ)
position ต้องเป็น absolute ลูกโป่งเราจะได้ลอยได้

7. เรียกใช้ปลักอิน สร้างลูกโป่งเคลื่อนไหว

โค๊ด: [Select]

$('#balloon')
.sprite({fps: 3, no_of_frames: 3})
.spRandom({
top: 20,
left: 100,
right: 978,
bottom: 150,
speed: 8500,
pause: 1000
});

.sprite สำหรับกำหนดว่าจะให้แสดงกี่เฟรมต่อวินาที และภาพที่เราเตรียมไว้มีกี่เฟรม
.spRandom สำหรับกำหนดบริเวณให้ลูกโป่งลอยไปลอยมา ถ้าท่านต้องการให้มันอยู่กับที่ ก็ไม่จำเป็นจะ้ต้องใช้ method นี้

โค้ดทั้งหมดทั้งสิ้น

อ้างถึง

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.spritely-0.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#clound').pan({fps: 30, speed: 2, dir: 'left'});
   $('#balloon')
      .sprite({fps: 3, no_of_frames: 3})
      .spRandom({
         top: 20,
         left: 100,
         right: 978,
         bottom: 150,
         speed: 8500,
         pause: 1000
       });
});
</script>
<title>Sprite</title>
<style type="text/css">
body{background:#0033FF;}
#clound{
   background:url(cloud.png);
   height:114px;
   width:100%;
}
#balloon {
   background:url("balloon.png") no-repeat scroll left top transparent;
   height:118px;
   width:82px;
   position:absolute;
}
</style>
</head>
<body>
<div id="clound"></div>
<div id="balloon"></div>
</body>
</html>

ทำได้กันหรือเปล่าครับ คราวนี้ก็มาลุย ทำพื้นหลัง หรือปรับเปลี่ยนตามต้องการนะครับผม Cool

ลิงค์หัวข้อ: http://dexmore.com/topic/2006

แอนิเมชั่น jQuery ....

ทำเว็บไซต์ | แต่งบอร์ด | ออกแบบ | SMF | Joomla | Drupal | WordPress | JQuery | CMS | ECommerce | Tel. +668-08577477