Chào các bạn, tạm thời hôm nay chúng ta sẽ bỏ qua các hướng dẫn về các chức năng phức tạp, mệt mỏi mà thay vào đó là một hướng dẫn khá thú vị và dễ thương. Một cô tiên bé bỏng bay qua bay lại trong website, kéo theo một thông điệp thú vị nào đó thì chắc sẽ là một điểm nhấn thu hút nhiều chú ý của người dùng đúng không nào. Vậy chúng ta bắt đầu nhé.
Bạn đã xem qua demo chưa, hãy xem demo để có thêm động lực xem tiếp hướng dẫn nào. Như bạn thấy trong demo, ý tưởng chúng ta là sẽ có một cô tiên, cô tiên này có thể đập cánh, bay ngẫu nhiên về các vùng trên màng hình, và cô tiên sẽ quay đầu về hướng mà cô bay tới, chứ không bay lui nhé.
Từ những điều bạn thấy, ta có thể hình dung như sau.
Chúng ta sử dụng thư viện jquery sprite. Đây là thư viện giúp tạo ra các nhân vật động, các hiệu ứng chuyển động của các đối tượng trên giao diện website. Thư viện này tương đối nhẹ và dễ sử dụng, nó cung cấp đầy đủ các chức năng mà chúng ta cần, bạn đọc thêm về thư viện này và cách sử dụng nó tại trang chủ nhé : Jquery Sprite . Tham khảo thôi về các phương thức chính, còn về phiên bản mình sử dụng trong demo này là phiên bản đã được mình sửa lại đôi chút. Nhưng hãy chắc là bạn đã đọc kỹ tài liệu trước rồi nhé.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function addangels() {
var newangel = '<div id="angle1" class="angel"></div>';$('body').append(newangel);
$('#angle1').fadeIn();
$('#angle1').css('left', Math.random() * screen.width);$('#angle1').css('top', Math.random() * screen.height);var randomOption = {top: 50,left: 50,right: screen.width - 50,bottom: screen.height - 50,speed: 6000};$('#angle1').sprite({fps: 12,no_of_frames: 2}).spRandom(randomOption).active();
$('#angle1').mouseover(function () {
$(this).spStopRandom();
});
$('#angle1').mouseout(function () {
$(this).spRandom(randomOption);
});
}
Đây là hàm chính, chúng ta khai báo một sprite cho div có id là angle1. sprite này có hai frame, và tần suất chuyển đổi giữa hai frame này là 12 frame/giây.
Di chuyển cô tiên
Khi hover chuột lên cô tiên, thì cô ấy không bay nữa, đứng lại nhấn nhá cho vui. ở đoạn này, bạn có thể thay frame khác, chẳng hạn như ẹo qua ẹo lại. Khi không hover lên cô ấy nữa thì cổ bay đi bay lại tiếp.
1
2
3
4
5
6
7
var randomOption = {
top: 50,
left: 50,
right: screen.width - 50,
bottom: screen.height - 50,
speed: 6000
};
Đây là tham số để truyền vào cho phương thức spRandom(). Các tham số top, left, right, bottom xác định giới hạn để sinh số random. ở đây chúng ta padding 50px. nghĩa là cô tiên sẽ không bay vào vùng cách viền 50px. Speed xác định tốc độ di chuyển của cô tiên, nếu bạn sử dụng một bà lão, thì nên chỉnh tốc độ chậm hơn.
Cách bay
Như bạn thấy, khi bạn scroll trang lên trên hoặc xuống dưới, thì nhìn cô tiên bay giống kiểu fixed quá, có vẻ không thật lắm. Để cô tiên có thể bay không phụ thuộc vào việc scroll, bạn xem trong file component.css và chỉnh position của class angle1 từ fixed thành relative.
1
2
3
.angel{
position: relative; /*independent on scroll*/
}
Có một điều rất hay, là bạn cũng có thể làm cho cô tiên bay tới một element nào đó. Bạn chỉ cần lấy vị trí của element đó, rồi cho cô tiên bay tới.
File ảnh sprite
Giờ nói về file ảnh của cô tiên. bạn xem file angle_sprite_v0.02.png bạn sẽ thấy ở đây có 3 hình. các hình này thực chất là có kích thước bằng nhau, xếp gần nhau. các ảnh này gọi là frame, số ảnh trên một hàng gọi là số frame mà mình khai báo trong file script lúc nảy. Còn từng hàng này thì gọi là state. Ở đây có hai state, mỗi state là ảnh cô tiên quay về bên phải hoặc bên trái, sử dụng khi cô tiên bay từ phải qua trái hoặc từ trái qua phải. Việc thay đổi này được mình custom trong file jquery.spritely-0.6.1-custom.js . Không có nhiều thời gian, nên mình viết đại vào trong đó luôn, khi nào có thời gian, bạn có thể sửa lại giống như sau :
1
2
3
4
5
6
7
8
if( isLeftToRight() )
{
angel.spState(1);
}
else
{
angel.spState(2);
}
Bạn đã xem qua demo chưa, hãy xem demo để có thêm động lực xem tiếp hướng dẫn nào. Như bạn thấy trong demo, ý tưởng chúng ta là sẽ có một cô tiên, cô tiên này có thể đập cánh, bay ngẫu nhiên về các vùng trên màng hình, và cô tiên sẽ quay đầu về hướng mà cô bay tới, chứ không bay lui nhé.
Từ những điều bạn thấy, ta có thể hình dung như sau.
- Để cô tiên đập cánh thì cần thay thế luân phiên nhiều bức ảnh, một bức là đang mở cánh, một bức là đang đập cánh.
- Cô tiên có thể bay được từ vị trí này sang vị trí ngẫu nhiên khác, thì ta random một tọa độ trên màng hình, rồi dùng hàm animate() của jquery để di chuyển cô tiên tới vị trí mới.
Chúng ta sử dụng thư viện jquery sprite. Đây là thư viện giúp tạo ra các nhân vật động, các hiệu ứng chuyển động của các đối tượng trên giao diện website. Thư viện này tương đối nhẹ và dễ sử dụng, nó cung cấp đầy đủ các chức năng mà chúng ta cần, bạn đọc thêm về thư viện này và cách sử dụng nó tại trang chủ nhé : Jquery Sprite . Tham khảo thôi về các phương thức chính, còn về phiên bản mình sử dụng trong demo này là phiên bản đã được mình sửa lại đôi chút. Nhưng hãy chắc là bạn đã đọc kỹ tài liệu trước rồi nhé.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function addangels() {
var newangel = '<div id="angle1" class="angel"></div>';$('body').append(newangel);
$('#angle1').fadeIn();
$('#angle1').css('left', Math.random() * screen.width);$('#angle1').css('top', Math.random() * screen.height);var randomOption = {top: 50,left: 50,right: screen.width - 50,bottom: screen.height - 50,speed: 6000};$('#angle1').sprite({fps: 12,no_of_frames: 2}).spRandom(randomOption).active();
$('#angle1').mouseover(function () {
$(this).spStopRandom();
});
$('#angle1').mouseout(function () {
$(this).spRandom(randomOption);
});
}
Đây là hàm chính, chúng ta khai báo một sprite cho div có id là angle1. sprite này có hai frame, và tần suất chuyển đổi giữa hai frame này là 12 frame/giây.
Di chuyển cô tiên
Khi hover chuột lên cô tiên, thì cô ấy không bay nữa, đứng lại nhấn nhá cho vui. ở đoạn này, bạn có thể thay frame khác, chẳng hạn như ẹo qua ẹo lại. Khi không hover lên cô ấy nữa thì cổ bay đi bay lại tiếp.
1
2
3
4
5
6
7
var randomOption = {
top: 50,
left: 50,
right: screen.width - 50,
bottom: screen.height - 50,
speed: 6000
};
Đây là tham số để truyền vào cho phương thức spRandom(). Các tham số top, left, right, bottom xác định giới hạn để sinh số random. ở đây chúng ta padding 50px. nghĩa là cô tiên sẽ không bay vào vùng cách viền 50px. Speed xác định tốc độ di chuyển của cô tiên, nếu bạn sử dụng một bà lão, thì nên chỉnh tốc độ chậm hơn.
Cách bay
Như bạn thấy, khi bạn scroll trang lên trên hoặc xuống dưới, thì nhìn cô tiên bay giống kiểu fixed quá, có vẻ không thật lắm. Để cô tiên có thể bay không phụ thuộc vào việc scroll, bạn xem trong file component.css và chỉnh position của class angle1 từ fixed thành relative.
1
2
3
.angel{
position: relative; /*independent on scroll*/
}
Có một điều rất hay, là bạn cũng có thể làm cho cô tiên bay tới một element nào đó. Bạn chỉ cần lấy vị trí của element đó, rồi cho cô tiên bay tới.
File ảnh sprite
Giờ nói về file ảnh của cô tiên. bạn xem file angle_sprite_v0.02.png bạn sẽ thấy ở đây có 3 hình. các hình này thực chất là có kích thước bằng nhau, xếp gần nhau. các ảnh này gọi là frame, số ảnh trên một hàng gọi là số frame mà mình khai báo trong file script lúc nảy. Còn từng hàng này thì gọi là state. Ở đây có hai state, mỗi state là ảnh cô tiên quay về bên phải hoặc bên trái, sử dụng khi cô tiên bay từ phải qua trái hoặc từ trái qua phải. Việc thay đổi này được mình custom trong file jquery.spritely-0.6.1-custom.js . Không có nhiều thời gian, nên mình viết đại vào trong đó luôn, khi nào có thời gian, bạn có thể sửa lại giống như sau :
1
2
3
4
5
6
7
8
if( isLeftToRight() )
{
angel.spState(1);
}
else
{
angel.spState(2);
}
Nguồn : senviet.org
P/s : Do copy cái chỗ code có bị lỗi font chút xíu, ai có nhu cầu thì để fix xóa mấy cái số thứ tự đi là ok nhé, có gì làm không được thì cứ pm mình. Thân
)
