Spritely - Chuyển động với jQuery
Spritely là plugin của jQuery plugin giúp bạn tạo các đối tượng và hình nền chuyển động mà không cần sử dụng tới flash.
Plugin hoạt động trên hầu hết các trình duyệt kể cả IE6. Bạn có thể tạo đối tượng chuyển động tới bất kỳ phần nào trên trang.
Cách sử dụng
Như bất cứ plugin nào, trước tiên là bạn cần gắn jQuery và plugin vào trong thẻ <head>
<!-- Thư viện jQuery --> <script type="text/javascript" src="js/jquery.min.js"></script> <!-- Spritely plugin --> <script type="text/javascript" src="js/jquery.spritely-0.1.js"></script>
Spritely có 2 kiểu chuyển động chính: pan() và sprite(). Cả 2 kiểu đều tạo chuyển động bằng cách thay đổi thuộc tính css của background của thẻ html. Sự khác biệt là sprite() có 2 hoặc nhiều hơn 2 frame để tạo chuyển động trong khi pan() chỉ là một bức ảnh tạo có thể repeat.
// Sử dụng pan
(function($) {
$(document).ready(function() {
$('#layer1').pan({fps: 30, speed: 1, dir: 'left'});
});
})(jQuery);
//Sử dụng sprite
(function($) {
$(document).ready(function() {
$('#bird').sprite({fps: 12, no_of_frames: 3});
});
})(jQuery);
Bạn có thể tìm hiểu kỹ hơn về cách sử dụng & tùy biến tại spritely documentation
Bạn có thích bài viết này?
Neo
Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web 
. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.