Yêu cầu
- Để có thể thực hiện được những ví dụ phía dưới đây, bạn nên tìm hiểu về HTML & CSS, ngoài ra Jquery cũng là một phần quan trọng không thể thiếu được.
- Tuy nhiên, để có thể làm được các nhân vật hoạt động, thì photoshop, illustrator, hoặc bất kì phầm mềm đồ họa nào khác cũng là điều tất yêu nên biết.
- Các hình ảnh, javascript trong bài được đính kèm với trong mục download.
Giới thiệu về Jquery Spritely
jQuery Spritely được phát triển bởi Artlogic, với chức năng chính là giúp cho các nhân vật hoặc đối tượng chuyển động. Điểm đặc biệt khiển Spritely trỡ nên nổi bật nó nó hoạt động tốt trên hầu hết các trình duyệt hiện tại, và ngay cả cụ già IE 6 khó tính nó cũng hoạt động được.
Cách sử dụng
jQuery Spritely có 2 chức năng chính là .pan() và .sprite(). Với .pan(), bạn có thể tạo được những background chuyển động lập đi lập lại theo chiều ngang. Còn .sprite(), có thể giúp bạn làm cho các nhân vậy diễn hoạt theo khung hình.
Giờ chúng ta sẽ đi vào sâu hơn từng cái bằng việc code html&css và jQuery
<style type="text/css">
body{
background-image: linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
background-image: -o-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(208,227,242) 30%, rgb(198,230,255) 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, rgb(208,227,242)),color-stop(1, rgb(198,230,255)));
font-family: Roboto;
}
article#cloud{
background: url(../images/cloud.png) repeat-x;
height: 100%;width:100%;
z-index: 2;
}
</style>
<article id="cloud"></article>
Giờ chúng ta đưa thêm đoạn jQuery này vào nhé, giúp cho mây chuyển động.
jQuery(document).ready(function($) {
$('#cloud').pan({
fps: 30,
speed: 2,
dir: 'left'
});
});
Giải thích ý nghĩa các thuộc tính:
- fps: 30, // Frame trên giây, fps càng nhỏ thì chuyển động sẽ càng giật.
- speed: 2, // tốc độ di chuyển của vậy thể
- dir: ‘left’ // hướng chuyển động, left: phải>trái, right: trái>phải
Vậy là chúng ta đã hoàn thành chức năng .pan() rồi. Bạn có thể
xem demo tại đây.
Tiếp theo, chúng ta sẽ đi tới chức năng .sprite().
Code html & css, chúng ta sẽ phát triển thêm vào dựa trên đoạn code html&css trên nhé. Đầu tiên, mình thêm section#birds-1 vào article#cloud mà chúng ta đã tạo ở trên.
<article id="cloud">
<section id="birds-1"></section>
</article>
Và code css
section#birds-1{
background:url(../images/birds-1.png) no-repeat;
width: 194px;
height: 156px;
position: absolute;
cursor: pointer;
}
Giờ chúng ta sẽ diễn hoạt cho con chim bằng .sprite()
$('#birds-1')
.sprite({
fps: 12,
no_of_frames: 3
});
Giải thích ý nghĩa thuộc tính trong đoạn code jQuery nhé.
- fps: 12, // Khung hình / giây
- no_of_frames: 3 // Số lượng khung hình trong bức ảnh
Đoạn này có lẽ sẽ khá rắc rối đây. Trước tiên bạn hãy nhìn vào hình phía dưới nhé.
Chúng ta có 3 hình con chim giống nhau, nhưng bạn chú ý phần cánh, phần này mình đã xử lý để nó giống như đang đập cánh vậy. Vậy .sprite() hoạt động bằng cách sẽ chạy từng hình trong bức hình trên để tạo sự diễn hoạt cho đối tượng, bạn có thể tượng tượng giống như phim nhựa lúc xưa vậy. Nhiều hình liên tiếp ghép lại và tạo ra sự chuyển động.
Giờ thì con chim của chúng ta đã bay được rồi đó. Tuy nhiên nó chỉ bay có một chổ duy nhất thôi.
Chúng ta cần phải thêm vào đoạn này, để nó có thể tự do bay trong phạm vi như trong
demo này.
$('#birds-1').spRandom({ // Bay tự do trong khoãng cách như dưới
top: 70, // cao tối đa
left: 100, // trái
right: 200, // phải
bottom: 340, // dưới
speed: 4000, // tốc độ đi chuyển giữa các điểm
pause: 2000 // thời gian ngừng giữa các điểm
});
Giải thích đoạn js trên nhé:
- top, left, right, bottom: giới hạn mà chim sẽ bay
- speed: tốc độ chuyển động giữa các điểm
- pause: thời gian ngừng giữa các điểm.
Nâng cao
Nếu chim chỉ bay không thì cũng chán phải ko bạn? Giờ nếu bạn thêm bộ thư viện jQuery Ui vào thì chúng ta có thể thêm chức năng kéo thả, như demo này nhé.
Giờ chúng ta thêm thêm khắc 1 chút, khi hover vào con chim, nó sẽ hiện lên đoạn text “Kéo em đi….” khi click chuột vào thì sẽ hiện lên đoạn text “Hãy kéo em đi thật xa….” và bỏ chuột ra thì sẽ trở lại đoạn text ban đầu.
Code html
<article id="cloud">
<section id="birds-1">
<p>Kéo em đi....</p>
</section>
</article>
Thêm vào css
section#birds-1 p{
padding: 3px 5px;
font-size: 16px;
border-radius: 3px;
background: #fff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
section#birds-1:hover p{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
Thêm vào jquery
$('#birds-1').isDraggable({ // Nếu drag hoạt động, phải thêm Jquery Ui vào
start: function() { // Khi click chuột vào đối tượng và kéo
// Các sự kiện sẽ diễn ra
$('#birds-1').fadeTo('fast', 0.7);
},
stop: function() { // Khi bỏ buôn chuột ra
// Các sự kiện sẽ diễn ra
$('#birds-1').fadeTo('fast', 1);
$('#birds-1').find("p").html("Kéo em đi....");
},
drag: function() { // Trong quá trình kéo
// các sự kiện sẽ diễn ra.
$('#birds-1').find("p").html("Hãy kéo em đi thật xa....");
}
});
Bạn nên tải về để thực hiện(để tải về, nhấn link download phía trên bài viết)