 |
KenDz
(Admin)
[Off] 19-08-2016 |
Maxhay.mobie.in xin giới thiệu với bạn một hiệu ứng ngồ ngộ, gọi là hiệu ứng dập dềnh cho chữ. Khi bạn di chuột qua các con chữ, chữ sẽ dập dềnh như sóng nước, nhìn rất hay! Hiệu ứng này sử dụng đối tượng canvas trong HTML5 và JavaScript để xử lý. Đây là một trong rất nhiều các hiệu ứng khác nhau từ trang học code nổi tiếng CodeCademy.com
Bước 1) Tạo file HTML có nội dung như sau
<!DOCTYPE html><html><head><script type="text/javascript" src=" http://code.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript" src=" http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script></head><body><canvas id="myCanvas"></canvas><script type="text/javascript" src=" http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script><script type="text/javascript" src="main.js"></script></body></html>
Bước 2) Tạo file main.js có nội dung như sau:
var myName ="[ ChiaseIT.Mobie.In ]";
var red =[0,100,63];var orange =[40,100,60];var green =[75,100,40];var blue =[196,77,55];var purple =[280,50,60];var letterColors =[red, orange, green, blue, purple];
drawName(myName, letterColors);
if(10<3){ bubbleShape ='square';}else{ bubbleShape ='circle';}
bounceBubbles();
var red =[0,100,63];var orange =[40,100,60];var green =[75,100,40];var blue =[196,77,55];var purple =[280,50,60];var letterColors =[red, orange, green, blue, purple];
drawName(myName, letterColors);
if(10<3){ bubbleShape ='square';}else{ bubbleShape ='circle';}
bounceBubbles();
Vậy là xong, bạn có thể đổi chữ trong biến myName hoặc tạo thêm một số màu mới và thêm vào biến mảng letterColors theo ý mình. Để đổi từ kiểu chữ hình tròn sang hình vuông, bạn đổi câu lệnh điều kiện từ 10 < 3 thành 10 > 3.
Đây là bài hướng dẫn rất dễ để làm theo, tuy nhiên để hiểu sâu sắc yêu cầu bạn phải đọc code kỹ hơn. Chúc bạn thành công!
Theo: codecademy wapviet.cf
