Share code tạo hiệu ứng ma trận 3D cực đẹp cho website

AnonyViet từng share một bộ source code ma trận bằng Canvas rất đẹp và được phản hồi rất tốt. Hôm nay, mình sẽ chia sẽ thêm bộ Source code ma trận 3D được viết bằng HTML – CSS và JS. Hiệu ứng đổ chữ theo chiều dọc trên nền đen giống trong các bộ phim hacker.

Hiệu ứng này tạo nên một phong cách rất lạnh lùng giống các Hacker trong phim. Bạn có thể sử dụng bộ source code này để học thêm kiến thức hoặc khoe bạn bè cho vui. Với hiệu ứng có ma trận chiều sâu, làm cho màn hình trở nên thật huyền bí. Bây giờ, mình sẽ giới thiệu bộ Source code và cách sử dụng cho bạn xem.

Mục lục bài viết:

Giới thiệu về bộ source code hiệu ứng ma trận 3D

Hiệu ứng ma trận 3D cực đẹp

do các dòng chữ đang rơi nên khi mình chụp nó hơi bị lem lem, nhưng thực tế thì hiệu ứng này rất đẹp.

Hướng dẫn sử dụng

Tạo một file index.html có nội dung code như sau:

Tiếp theo tạo một thư mục tên JS và trong thư mục đó tạo thêm một file index.js có nội dung như sau:

Cuối cùng tạo thư mục tên css chứa file style.css có nội dung như sau:

Sau khi tạo xong, bạn sẽ được tập hợp các File theo cấu trúc:

  • index.html
  • css (thư mục)
    style.css
  • js (thư mục)
    index.js

Nếu bạn không thể tự làm được thì có thể tải về bộ Source Code được làm sẵn tại link dưới đây:

Vậy là xong, cuối cùng bạn chỉ cần Upload bộ Source Code này lên Host và chia sẽ với bạn bè. Nếu bạn chưa biết cách Upload lên Host thì hãy tham khảo bài viết hướng dẫn của AnonyViet tại link dưới đây:

Bạn có thể sử dụng dịch vụ host miễn phí tại 000webhost để thử nghiệm source code nhé !!

Like Fanpage hoặc theo dõi website để cập nhật nhanh các bài viết hay.

Chúc bạn thành công
Lmint.

7
Để lại bình luận

avatar
5 Comment threads
2 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
Bé Bi 12 tuổiNamNguyễn PhúNguyễn Văn Sơnsupport Recent comment authors

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

newest oldest
gVectors Support | <span class="wpdiscuz-comment-count">2 comments</span>
gVectors Support | 2 comments

testing testing testing testing testing testing testing

support | <span class="wpdiscuz-comment-count">2 comments</span>
support | 2 comments

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Nguyễn Văn Sơn | <span class="wpdiscuz-comment-count">1 comments</span>

Ad ơi! Sao em upload source code lên host như hướng dẫn mà sao khi vào trang web lại đen thui không có gì cả??? Anh xem giúp với ạ! Web em: https://peterparkerson.000webhostapp.com/

Bé Bi 12 tuổi | <span class="wpdiscuz-comment-count">318 comments</span>

code bạn vẫn chạy mà

Nguyễn Phú | <span class="wpdiscuz-comment-count">1 comments</span>
Nguyễn Phú | 1 comments

làm sao thêm nhạc vào nhỉ ad

Bé Bi 12 tuổi | <span class="wpdiscuz-comment-count">318 comments</span>

cảm ơn ad, bài viết rất hay!!!!!!!!!!!!!!!!!!!

Nam | <span class="wpdiscuz-comment-count">19 comments</span>
Nam | 19 comments

cảm ơn ad, bài viết rất hay!!!!!!!!!!!!!!!!!!!