Hiệu ứng dập dềnh cho chữ

14/06/201514/06/2015 Lục Đức Thành

MyLớp.edu.vn 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

Hiệu ứng dập dềnh cho chữ

View Demo Download Files

Bước 1) Tạo file HTML có nội dung như sau:

HTML Code: index.html
1 2 3 4 5 6 7 8 9 10 11 12	<!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>

HTML Code: index.html

<!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:

JavaScript Code: main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	var myName = "[MyLop.edu.vn]"; 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();

JavaScript Code: main.js

var myName = "[MyLop.edu.vn]";
 
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

Cheers,

Về tôi
Bài mới

Lục Đức Thành

Giáo viên của FPT Arena

Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.