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í 17++ 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

Contents

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

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

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...

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. SEO Executive là một cơ hội nghề nghiệp thú vị và có khả năng phát triển nhanh chóng cho bất...
    21 giây trước
  2. Tiến Cường Audio hệ thống âm thanh hội thảo chuyên nghiệp Giới thiệu Tiến Cường Audio Trong thời đại công...
    9 giây trước
  3. Với thời đại công nghệ 4.0 việc tiếp cận các sản phẩm hay dịch vụ trở nên đơn giản và...
    14 giây trước
  4. Trong chiến lược tiếp thị toàn diện và hiệu quả, có rất nhiều nhân tố được các chủ doanh nghiệp...
    23 giây trước
  5. Landing Page (Trang đích) là một trang web cụ thể trên trang web của bạn được xây dựng cho một...
    11 giây trước
  6. Tại sao bạn nên tạo dấu tích xám (tích xanh) Facebook? Làm thế nào trang kinh doanh Facebook nhận được dấu...
    10 giây trước
  7. Tổng quan về Google Webmaster Tool Nếu bạn đã theo dõi bài viết về Google Analytics của mình cùng với...
    20 giây trước
  8. Viết bài luôn thú vị và đòi hỏi kỹ năng chuyên môn cao. Với sự ra đời của Internet và...
    16 giây trước
  9. Một Website có tốc độ load trang quá chậm sẽ làm bạn mất rất nhiều lưu lượng truy cập, khách...
    26 giây trước
  10. WordPress là nền tảng CMS được ưa chuộng nhất trên web. Do sự phổ biến và phát triển của WordPress CMS,...
    11 giây trước