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

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>

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();

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,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
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.

Bình luận

2 thoughts on “Hiệu ứng dập dềnh cho chữ

  1. Chú ơi sao con làm hoài “Hiệu ứng dập dềnh cho chữ” mà hổng được. Chú chỉ lại kỹ cho con nha. Cảm ơn chú.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website