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

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,

Bio
Latest Posts

Lục Đức Thành

Giáo viên at 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.

Latest posts by Lục Đức Thành (see all)

Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
WordPress 5 có gì mới? - 23/12/2018
Sublime Text 3 Portable Windows 64 bit - 11/12/2017
Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017

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

Chú ơi sao con làm hoài “Hiệu ứng dập dềnh cho chữ” mà hổng được. Chú chỉ lại kỹ cho con nha. Cảm ơn chú.

Bạn gửi file đang code bị lỗi để mình xem sai ở chỗ nào nhé! Gửi link ở đây hoặc gửi file vào email chipheobachkhoa@gmail.com nha.

Lớp học Web Design trực tuyến - MyLớp is MyLove

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