Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js

4.8/5 - (5 bình chọn)

Particles.js là một thư viện Javascript dùng để tạo ra các hạt. Thư viện Particles.js là mã nguồn mở và bạn có thể tạo ra các LandingPage đẹp hoặc các phần trên trang web của mình. Trong bài viết này, chúng ta cùng nhau tìm hiểu cách thêm Particles.js vào trang web của bạn.

Xem thêm: Kết hợp jQuery Masonry và Infinite Scroll để lấy Newsfeed như Tumblr dạng block Cách thêm Infinite Scrolling WordPress lấy tin như Facebook Feed

Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js particles-javascript-library

Làm thế nào để thêm Particles.js vào 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 thống kê và các tùy chọn để sử dụng thư viện. Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js particles-official-site

Bước 2:

Tải xuống thư viện Particles.js sử dụng GitHub hoặc nút Tải xuống trên trang web. Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js download-particles

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. Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js unzip-particles

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. Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js particles-html-file

Bước 5:

Tạo một tập 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. Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js particles-css-file

Bước 6:

Bây giờ đến phần cấu hình thư viện. Phần tốt nhất về thư viện Particles.js là nhà phát triển có giao diện GUI tương tác, nơi bạn có thể đặt 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 mặc định. 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,… Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js particles-config

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. Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js particles-json-file

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. Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js add-json-config Thêm đoạn mã này vào 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 vào thẻ body. Chúng ta nhận được kết quả như sau: Hướng dẫn tạo hiệu ứng các hạt chuyển động sử dụng Particles.js particles-result Download Code    

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Bạn muốn bắt đầu xây dựng một Website Online của riêng mình? Đối với những ai không thuộc dân công...
    1 giây trước
  2. Khi đặt quảng cáo người làm hay lạm dụng khi có nhấp chuột nhằm mục đích tăng chi phí quảng...
    25 giây trước
  3. Tổng quát Hướng dẫn Tổng quan Chào mừng bạn đến với Chương trình Xếp hạng Chất lượng tìm kiếm! Là...
    22 giây trước
  4. Sức mạnh thực sự của PHP cũng như các ngôn ngữ lập trình khác xuất phát từ các hàm của...
    22 giây trước
  5. Có thể nói Facebook hiện nay đang là trang mạng xã hội được nhiều người quan tâm nhất tại Việt...
    14 giây trước
  6. Google sẽ không cung cấp chứng chỉ SEO cho các nhà quản trị web (webmasters) hoặc các công ty SEO...
    24 giây trước
  7. Với một tờ giấy trắng, bạn cần viết gì lên nó để có một quảng cáo hấp dẫn cho sản...
    1 giây trước
  8. Ở bài trước chúng ta đã cùng nhau tìm hiểu Woocommerce là gì? Tại sao bạn nên sử dụng Woocommerce...
    29 giây trước
  9. TOP 5 công cụ kiểm tra nội dung website miễn phí năm 2018 Khi bạn viết nội dung cho các...
    1 giây trước
  10. Hiện nay hầu hết mọi người đều sử dụng Facebook. Nhờ có Facebook mà mọi người có thể kết nối với...
    30 giây trước