Particles.js là một thư viện Javascript dùng để tạo ra hiệu ứng các hạt chuyển động. Particles.js là một thư viện mã nguồn mở và bạn có thể tạo ra các trang web dạng LandingPage đẹp mắt hoặc tạo ra hiệu ứng cho các phần của trang web. Trong bài viết này, mình sẽ chia sẻ cách sử dụng thư viện Particles.js trong dự án web của bạn.
Bước 1:
Truy cập vào trang web chính thức của Particles.js. Trang web có một bản demo đẹp với các số liệu thống kê và các tùy chọn để sử dụng thư viện.
Bước 2:
Tải xuống thư viện Particles.js sử dụng GitHub hoặc nút Download trên trang web.
Bước 3:
Chúng ta tiến hành giải nén tập tin sau khi tải về. Bạn sẽ thấy thư viện với nhiều tệp và một thư mục demo. Bạn có thể sử dụng tệp particles.js hoặc particles.min.js. Copy tập tin với đuôi mở rộng .js vào dự án của bạn.
Bước 4:
Bây giờ, chúng ta tạo ra một tập tin HTML sẽ hiển thị các hạt. Thêm tập tin particles.js vào cuối tập tin HTML.
<!DOCTYPE html> <html> <head> <title>Particles.js Demo</title> </head> <body id=”particles-js”> <img src=”framgia-logo.png” id=”logo”> <script src=”particles.js”></script> </body> </html>
Bước 5:
Tạo một tập tin CSS để định dạng trang HTML. Ở đây, chúng ta chỉ thay đổi màu nền và căn giữa hình ảnh của bản demo.
body { background: cornflowerblue; } #logo { margin: 0 auto; text-align: center; left: 45%; top: 45%; position: absolute; }
Bước 6:
Bây giờ chúng ta sẽ cấu hình thư viện. Phần tốt nhất của thư viện Particles.js là nó hỗ trợ giao diện GUI trực quan, nơi bạn có thể thiết lập các tùy chọn của mình và tạo tệp JSON cấu hình. Chúng ta hãy xem xét các lựa chọn khác nhau. Tùy chọn đầu tiên là chọn loại hạt. Bạn có thể chọn từ Default, NASA, Bubble, Snow, Nyan Cat. Ở đây chúng ta dùng tùy chọn Default. Tùy chọn thuộc tính hạt cho phép bạn thiết lập một số tùy chọn như số, màu sắc, hình dạng, kích thước,…
Bước 7:
Sau khi hoàn tất, tải tệp tin JSON bằng cách nhấp vào Download current config (json). Tệp JSON chứa các thuộc tính hạt.
{ “particles”: { “number”: { “value”: 80, “density”: { “enable”: true, “value_area”: 800 } }, “color”: { “value”: “#ffffff” }, “shape”: { “type”: “circle”, “stroke”: { “width”: 0, “color”: “#000000” }, “polygon”: { “nb_sides”: 5 }, “image”: { “src”: “img/github.svg”, “width”: 100, “height”: 100 } }, “opacity”: { “value”: 0.5, “random”: false, “anim”: { “enable”: false, “speed”: 1, “opacity_min”: 0.1, “sync”: false } }, “size”: { “value”: 3, “random”: true, “anim”: { “enable”: false, “speed”: 40, “size_min”: 0.1, “sync”: false } }, “line_linked”: { “enable”: true, “distance”: 150, “color”: “#ffffff”, “opacity”: 0.4, “width”: 1 }, “move”: { “enable”: true, “speed”: 6, “direction”: “none”, “random”: false, “straight”: false, “out_mode”: “out”, “bounce”: false, “attract”: { “enable”: false, “rotateX”: 600, “rotateY”: 1200 } } }, “interactivity”: { “detect_on”: “canvas”, “events”: { “onhover”: { “enable”: true, “mode”: “repulse” }, “onclick”: { “enable”: true, “mode”: “push” }, “resize”: true }, “modes”: { “grab”: { “distance”: 400, “line_linked”: { “opacity”: 1 } }, “bubble”: { “distance”: 400, “size”: 40, “duration”: 2, “opacity”: 8, “speed”: 3 }, “repulse”: { “distance”: 200, “duration”: 0.4 }, “push”: { “particles_nb”: 4 }, “remove”: { “particles_nb”: 2 } } }, “retina_detect”: true }
Bước 8:
Cuối cùng, thêm thuộc tính JSON vào tập tin HTML của bạn. Để làm điều này, hãy tạo một thẻ script và dán các thuộc tính JSON.
<script> particlesJS(“particles-js”, dán nội tập tin JSON đã tải về ở trên vào đây); </script>
Thêm đoạn mã này vào cuối thẻ body và thêm và id=”particles-js” vào phần tử bạn muốn hiển thị các hạt. Ở đây chúng ta đặt thuộc tính id=”particles-js” vào thẻ body. Chúng ta nhận được kết quả như sau:
Các bạn có thể tham khảo code ở đây: Download Code
Nguồn tham khảo: https://readmenow.in/add-particles-js-web-project
Top 19 particles là gì viết bởi Cosy
Thông tin tài khoản
- Tác giả: tratu.coviet.vn
- Ngày đăng: 01/21/2023
- Đánh giá: 4.78 (396 vote)
- Tóm tắt: Định nghĩa của từ ‘particles’ trong từ điển Lạc Việt. … danh từ. một mẩu, mảnh nhỏ (của cái gì) … câu chuyện của cô ta không có một chút nào là thật cả.
- Nội Dung: Particles.js là một thư viện Javascript dùng để tạo ra hiệu ứng các hạt chuyển động. Particles.js là một thư viện mã nguồn mở và bạn có thể tạo ra các trang web dạng LandingPage đẹp mắt hoặc tạo ra hiệu ứng cho các phần của trang web. Trong bài viết …
fine-air particle có nghĩa là gì? Xem bản dịch
- Tác giả: vi.hinative.com
- Ngày đăng: 02/21/2023
- Đánh giá: 4.44 (473 vote)
- Tóm tắt: fine-air particle có nghĩa là gì? Xem bản dịch · I don’t know, but “fine airborne particles” = các hạt nhỏ trong không khí. Example: bồ hóng · You …
- Nội Dung: Particles.js là một thư viện Javascript dùng để tạo ra hiệu ứng các hạt chuyển động. Particles.js là một thư viện mã nguồn mở và bạn có thể tạo ra các trang web dạng LandingPage đẹp mắt hoặc tạo ra hiệu ứng cho các phần của trang web. Trong bài viết …
Định nghĩa và ví dụ về Particle trong Ngữ pháp tiếng Anh
- Tác giả: vi.eferrit.com
- Ngày đăng: 01/09/2023
- Đánh giá: 4.27 (211 vote)
- Tóm tắt: ” Particle là … một cái gì đó của một ‘thoát (hoặc cop-out) thể loại’ cho các nhà ngữ pháp.” Nếu nó nhỏ và bạn không …
- Nội Dung: . . . Một lĩnh vực là một mô tả của một đối tượng chung trong một mặt phẳng lớn của ý nghĩa. “(Bonnie A. Hain và Richard Louth,” Đọc, Viết, và Tìm hiểu: Cải thiện hướng dẫn đọc viết qua các ngành. ” Giảng dạy trong thế kỷ 21: Thích ứng Viết Giáo …
Charged Particles là gì? IONX token là gì?
- Tác giả: webgiacoin.com
- Ngày đăng: 06/13/2022
- Đánh giá: 4.03 (565 vote)
- Tóm tắt: Hạt tính phí (IONX) là một loại tiền điện tử và hoạt động trên nền tảng Ethereum. Charged Particles có nguồn cung hiện tại là 0. Giá được biết gần đây nhất …
- Nội Dung: . . . Một lĩnh vực là một mô tả của một đối tượng chung trong một mặt phẳng lớn của ý nghĩa. “(Bonnie A. Hain và Richard Louth,” Đọc, Viết, và Tìm hiểu: Cải thiện hướng dẫn đọc viết qua các ngành. ” Giảng dạy trong thế kỷ 21: Thích ứng Viết Giáo …
Tất cả những điều cần biết về Partical board là gì
- Tác giả: dongsuh.vn
- Ngày đăng: 02/19/2023
- Đánh giá: 3.86 (529 vote)
- Tóm tắt: Bạn hoang mang không hiểu Particle Board là gì và chúng có bao nhiêu loại. Hãy cùng theo dõi bài viết dưới đây của Dongsuh Furniture để tìm …
- Nội Dung: Để sản xuất được một tấm gỗ ván ép cần trải qua 4 giai đoạn. Đầu tiên là ép nóng ở nhiệt độ 1000 độ C. Sau đó đến quy trình xử lý chà nhám bề mặt ván ruột để tạo mặt phẳng của ván. Tiếp đến là quá trình phủ một lớp keo veneer lên bề mặt và tiếp tục …
alpha particles
- Tác giả: phacdochuabenh.com
- Ngày đăng: 09/26/2022
- Đánh giá: 3.72 (298 vote)
- Tóm tắt: Nghĩa của từ alpha particles – alpha particles là gì. Dịch Sang Tiếng Việt: danh từ hạt alpha. Từ điển chuyên ngành y khoa. Dictionary, Tra Từ Trực Tuyến, …
- Nội Dung: Để sản xuất được một tấm gỗ ván ép cần trải qua 4 giai đoạn. Đầu tiên là ép nóng ở nhiệt độ 1000 độ C. Sau đó đến quy trình xử lý chà nhám bề mặt ván ruột để tạo mặt phẳng của ván. Tiếp đến là quá trình phủ một lớp keo veneer lên bề mặt và tiếp tục …
Buy Me a Coffee
- Tác giả: lamvt.vn
- Ngày đăng: 05/26/2022
- Đánh giá: 3.4 (558 vote)
- Tóm tắt: Viết bài chuẩn SEO là điều kiện tiên quyết và hữu hiệu nhất giúp website của bạn lọt Top Google…. 4 giây trước. Google AdWords Express là gì? 10 Mẹo để tận …
- Nội Dung: Để sản xuất được một tấm gỗ ván ép cần trải qua 4 giai đoạn. Đầu tiên là ép nóng ở nhiệt độ 1000 độ C. Sau đó đến quy trình xử lý chà nhám bề mặt ván ruột để tạo mặt phẳng của ván. Tiếp đến là quá trình phủ một lớp keo veneer lên bề mặt và tiếp tục …
Cụm từ trong tiếng Anh
- Tác giả: pasal.edu.vn
- Ngày đăng: 12/12/2022
- Đánh giá: 3.24 (499 vote)
- Tóm tắt: I. Cụm từ là gì … Bổ ngữ đứng sau thường là cụm giới từ hoặc một mệnh đề. … Particle(s), này có thể là một trạng từ (adverb), hay là một giới từ …
- Nội Dung: Cụm động từ được tạo thành từ sự kết hợp giữa một động từ và một từ nhỏ (particle). Particle(s), này có thể là một trạng từ (adverb), hay là một giới từ (preposition), hoặc là cả hai. Khi đó cụm động từ sẽ có nghĩa khác hoàn toàn với động từ vốn có, …
Cách dùng tiểu từ trạng từ (adverb particles)
- Tác giả: hoc.tienganh123.com
- Ngày đăng: 12/10/2022
- Đánh giá: 3.15 (309 vote)
- Tóm tắt: Các trạng từ như down, in, up được gọi là tiểu từ trạng từ (adverb particles). Ngoài ra above, about, across, ahead, along, around, round, aside, away, …
- Nội Dung: Cụm động từ được tạo thành từ sự kết hợp giữa một động từ và một từ nhỏ (particle). Particle(s), này có thể là một trạng từ (adverb), hay là một giới từ (preposition), hoặc là cả hai. Khi đó cụm động từ sẽ có nghĩa khác hoàn toàn với động từ vốn có, …
Dịch Nghĩa của từ particle – Tra Từ particle là gì ?
- Tác giả: capnhatkienthuc.com
- Ngày đăng: 06/27/2022
- Đánh giá: 2.91 (84 vote)
- Tóm tắt: *alpha particles * danh từ – các hạt mang cực dương phát ra trong năng lượng phóng xạ hay các phản ứng hạt nhân khác. angular particle //.
- Nội Dung: Cụm động từ được tạo thành từ sự kết hợp giữa một động từ và một từ nhỏ (particle). Particle(s), này có thể là một trạng từ (adverb), hay là một giới từ (preposition), hoặc là cả hai. Khi đó cụm động từ sẽ có nghĩa khác hoàn toàn với động từ vốn có, …
Cụm động từ (Phrasal Verbs) trong tiếng Anh – Tài liệu ôn thi
- Tác giả: tailieuonthi.vn
- Ngày đăng: 02/16/2023
- Đánh giá: 2.82 (87 vote)
- Tóm tắt: Verb + particle + preposition (Particle prepositional phrasal verbs): động từ + tiểu ngữ + giới … Cụm động từ là gì? – Phrasal verb là gì?
- Nội Dung: Cụm động từ được tạo thành từ sự kết hợp giữa một động từ và một từ nhỏ (particle). Particle(s), này có thể là một trạng từ (adverb), hay là một giới từ (preposition), hoặc là cả hai. Khi đó cụm động từ sẽ có nghĩa khác hoàn toàn với động từ vốn có, …
PARTICLES LÀ GÌ
- Tác giả: ceds.edu.vn
- Ngày đăng: 11/08/2022
- Đánh giá: 2.68 (53 vote)
- Tóm tắt: Phân biệt tè trường đoản cú trạng tự (adverb particles) cùng giới từ bỏ (preposition). Bạn đang xem: Particles là gì. Các từ nhỏng down, in, …
- Nội Dung: 1. Phân biệt tiểu từ trạng từ (adverb particles) và giới từ (preposition).Bạn đang xem: Particles là gìCác từ như down, in, up không phải lúc nào cũng là giới từ. Hãy cùng so sánh các cặp ví dụ sau:- I ran down the road. (Tôi chạy xuống phố.) Please …
particle nghĩa là gì trong Tiếng Việt?
- Tác giả: englishsticky.com
- Ngày đăng: 12/29/2022
- Đánh giá: 2.59 (122 vote)
- Tóm tắt: Từ điển Anh Anh – Wordnet. particle. a body having finite mass and internal structure but negligible dimensions. Synonyms: subatomic particle. a function word …
- Nội Dung: 1. Phân biệt tiểu từ trạng từ (adverb particles) và giới từ (preposition).Bạn đang xem: Particles là gìCác từ như down, in, up không phải lúc nào cũng là giới từ. Hãy cùng so sánh các cặp ví dụ sau:- I ran down the road. (Tôi chạy xuống phố.) Please …
Fine particle
- Tác giả: filegi.com
- Ngày đăng: 03/01/2023
- Đánh giá: 2.53 (135 vote)
- Tóm tắt: Definition – What does Fine particle mean. Particulate matter not more than 2.5 microns in diameter. Source: Fine particle là gì? Business Dictionary …
- Nội Dung: 1. Phân biệt tiểu từ trạng từ (adverb particles) và giới từ (preposition).Bạn đang xem: Particles là gìCác từ như down, in, up không phải lúc nào cũng là giới từ. Hãy cùng so sánh các cặp ví dụ sau:- I ran down the road. (Tôi chạy xuống phố.) Please …
Từ điển Anh Việt
- Tác giả: tudienso.com
- Ngày đăng: 08/13/2022
- Đánh giá: 2.39 (182 vote)
- Tóm tắt: Sau khi đọc xong nội dung này chắc chắn bạn sẽ biết từ particles tiếng Anh nghĩa là gì. particle /’pɑ:tikl/ * danh từ – chút, tí chút =he has not a particle of …
- Nội Dung: 1. Phân biệt tiểu từ trạng từ (adverb particles) và giới từ (preposition).Bạn đang xem: Particles là gìCác từ như down, in, up không phải lúc nào cũng là giới từ. Hãy cùng so sánh các cặp ví dụ sau:- I ran down the road. (Tôi chạy xuống phố.) Please …
PARTICLES Tiếng anh là gì – trong Tiếng anh Dịch
- Tác giả: tr-ex.me
- Ngày đăng: 02/07/2023
- Đánh giá: 2.34 (89 vote)
- Tóm tắt: Diamond Micron Particles Powder refers to the granularity is smaller than 36 54 micron diamond particles single crystal diamond powder and polycrystalline …
- Nội Dung: 1. Phân biệt tiểu từ trạng từ (adverb particles) và giới từ (preposition).Bạn đang xem: Particles là gìCác từ như down, in, up không phải lúc nào cũng là giới từ. Hãy cùng so sánh các cặp ví dụ sau:- I ran down the road. (Tôi chạy xuống phố.) Please …
Hạt siêu mịn – IQAir
- Tác giả: iqair.com
- Ngày đăng: 06/21/2022
- Đánh giá: 2.23 (62 vote)
- Tóm tắt: Nguồn của các hạt siêu mịn là gì? … Một nghiên cứu năm 2021 trên tạp chí Particle and Fiber Toxicology cho thấy ngay cả khi tiếp xúc ngắn …
- Nội Dung: 1. Phân biệt tiểu từ trạng từ (adverb particles) và giới từ (preposition).Bạn đang xem: Particles là gìCác từ như down, in, up không phải lúc nào cũng là giới từ. Hãy cùng so sánh các cặp ví dụ sau:- I ran down the road. (Tôi chạy xuống phố.) Please …
Raw plastic particles
- Tác giả: sunmaxx.com.vn
- Ngày đăng: 12/24/2022
- Đánh giá: 2.07 (154 vote)
- Tóm tắt: HDPE plastic particles. View all … NHỰA NGUYÊN SINH LÀ GÌ? … Đây đều là những loại nhựa nguyên chất, không pha tạp, không thêm phụ gia …
- Nội Dung: 1. Phân biệt tiểu từ trạng từ (adverb particles) và giới từ (preposition).Bạn đang xem: Particles là gìCác từ như down, in, up không phải lúc nào cũng là giới từ. Hãy cùng so sánh các cặp ví dụ sau:- I ran down the road. (Tôi chạy xuống phố.) Please …
Bài học thứ 5: Tìm hiểu các phần từ của tiếng Hàn
- Tác giả: hoctienghan.com
- Ngày đăng: 03/27/2023
- Đánh giá: 2.09 (65 vote)
- Tóm tắt: Particles – Kết thúc gắn liền với từ ngữ để chỉ rõ ý nghĩa của từ trong câu. … Nó đặt từ hoặc các từ trước khi nó là chủ đề của câu … những gì câu đề …
- Nội Dung: Thường khi bạn bắt đầu học tiếng Hàn, bạn sẽ bị nhầm lẫn về việc khi nào sử dụng phần tử chủ từ so với phần tử tân từ. Như bạn đã học ở trên, 은지 가 먹어요 có nghĩa là Eunji đang ăn. Nhưng … 은지 는 먹어요 cũng có nghĩa là Eunji đang ăn. Trong một trường …