Tạo hiệu ứng nền tuyệt vời với Particles.js

Lúc này, một trong những thư viện yêu thích của tôi để tăng tốc trang đích làticles.js. Trong vài phút, bạn có thể có một giao diện khoa học viễn tưởng bóng bẩy và trang nhã, có thể thay đổi hoàn toàn cảm giác tổng thể của trang. Bạn có thể tìm thấy một số ví dụ tuyệt vời về những gì bạn có thể tạo trên trang web chính thức của họ.

Vì tài liệu của họ thiên về cách tiếp cận 'tự tìm hiểu và tự tìm hiểu', bài viết này hy vọng sẽ cung cấp thêm hướng dẫn có cấu trúc về cách sử dụng và khả năng của nó.

Vậy hãy bắt đầu…

Cài đặt

Bước đầu tiên rõ ràng là cài đặt nó thông qua npm:

$ npm install particles.js

Hoặc chỉ sử dụng CDN trong thẻ script: https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js

Nếu bạn sử dụng cài đặt local và gặp lỗi cho biết đường dẫn file của bạn 'bị chặn do kiểu MIME (“text / html”) không khớp (X-Content-Type-Options: nosniff)', thì bạn có thể cần phải sử dụng đầy đủ đường dẫn đến file hạt.js.

Thay vào đó, hãy sử dụng "./node_modules/particles.js/particles.js"

Cài đặt file

Ta chỉ cần ba file để bắt đầu, dự kiến index.html và app.js với một particles.json file mà ta sẽ xác định cách ta muốn các hạt cấu hình.

index.html

Tất cả những gì ta cần trong file html của bạn là một div với id là particles-js để thư viện kết nối canvas vào:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Particles</title>
</head>

<body>
  <div id="particles-js"></div>

  <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
  <!-- Or -->
  <script src="particles.js"></script>
</body>
</html>

app.js

Tất cả những gì ta cần ở đây là hàm particlesJS.load , hàm này có hai đối số: phần tử bạn muốn nó hiển thị trên ( #particles-js ) và tên của file cấu hình ( particles.json ).

particlesJS.load('particles-js', 'particles.json');

Cấu hình mặc định

Bây giờ tấm boilerplate đã được cài đặt , ta có thể bắt đầu với phần thú vị. Vì particles.js có mặc định riêng nên bạn không 'cần' chuyển bất cứ thứ gì vào ngoài một số dấu ngoặc nhọn mở.

Xem Ví dụ về Pen Particles JS # 1 của Alligator.io ( @alligatorio ) trên CodePen .

Không quá thú vị, phải không? Hãy jazz nó lên một chút.

Cấu hình

Các particles.json có hai đối tượng chính, particles để kiểm soát giao diện của các hạt và tính interactivity để xử lý tất cả các hiệu ứng. Ta sẽ bắt đầu với việc điều chỉnh ngoại hình.

vật rất nhỏ

Cách tốt nhất để bạn thấy phù hợp với việc này có lẽ là chỉ cần giải quyết profile và chơi với mọi thứ.

Lưu ý ở đây tôi đã thêm một số comment để có thêm thông tin, nhưng bạn cần xóa những comment đó vì JSON không hỗ trợ comment .

hạt.json

"particles": {
  "number": {
    "value": 50,
    "density": {
      "enable": true,
      "value_area": 700 // Denser the smaller the number.
    }
  },
  "color": { // The color for every node, not the connecting lines.
    "value": "#01579b" // Or use an array of colors like ["#9b0000", "#001378", "#0b521f"]
  },
  "shape": {
      "type": "circle", // Can show circle, edge (a square), triangle, polygon, star, img, or an array of multiple.
      "stroke": { // The border
        "width": 1,
        "color": "#145ea8"
      },
      "polygon": { // if the shape is a polygon
        "nb_sides": 5
      },
      "image": { // If the shape is an image
        "src": "",
        "width": 100,
        "height": 100
      }
  },
  "opacity": {
    "value": 0.7,
    "random": true
  },
  "size": {
    "value": 10,
    "random": true
  },
  "line_linked": {
    "enable": true,
    "distance": 200, // The radius before a line is added, the lower the number the more lines.
    "color": "#007ecc",
    "opacity": 0.5,
    "width": 2
  },
  "move": {
    "enable": true,
    "speed": 2,
    "direction": "top", // Move them off the canvas, either "none", "top", "right", "bottom", "left", "top-right", "bottom-right" et cetera...
    "random": true,
    "straight": false, // Whether they'll shift left and right while moving.
    "out_mode": "out", // What it'll do when it reaches the end of the canvas, either "out" or "bounce".
    "bounce": false, 
    "attract": { // Make them start to clump together while moving.
      "enable": true,
      "rotateX": 600,
      "rotateY": 1200
    }
  }
}

Và Đây là kết quả ta nhận được khi sử dụng cấu hình đó:

Xem Ví dụ về Pen Particles JS # 2 của Alligator.io ( @alligatorio ) trên CodePen .

tương tác

Các sự kiện, onhover và onclick , có 5 chế độ hoặc hiệu ứng, chúng sẽ có trên các hạt. Mỗi chế độ được kích hoạt trong đối tượng events và được cấu hình trong đối tượng modes .

push thêm nhiều hạt
remove các hạt xóa (chỉ có sẵn trên chế độ nhấp chuột)
grab kết nối các đường từ mọi nút trong một bán kính cụ thể với con trỏ của bạn (chỉ khả dụng ở chế độ onhover)
nút bubble trong một phạm vi cụ thể sẽ mở rộng và / hoặc thay đổi độ mờ
repulse đẩy tất cả các node đến một bán kính cụ thể

Mọi thứ bắt đầu thực sự thú vị khi bạn vượt qua nhiều chế độ dưới dạng một mảng.

hạt.json

"interactivity": {
  "detect_on": "canvas",
  // activate
  "events": {
      "onhover": {
        "enable": true,
        "mode": [
          "grab",
          "bubble"
        ]
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
  },
  // configure
  "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 0.7
        }
      },
      "bubble": {
        "distance": 600,
        "size": 12,
        "duration": 1,
        "opacity": 0.8,
        "speed": 2
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 20 // How many you want added
      },
      "remove": {
        "particles_nb": 10
      }
  }
},
"retina_detect": true // No clue what this does, docs don't explain, too scared to remove. ¯\_(ツ)_/¯
}

Đây là cách nó trông như thế này, tôi đã cố gắng tạo ra một cái nhìn giống như tổ ong:

Xem Ví dụ về Pen Particles JS # 3 của Alligator.io ( @alligatorio ) trên CodePen .

✨ Mặc dù hạt.js có thể không có chỗ đứng trong repository các khuôn khổ và thư viện hàng ngày của bạn, nhưng chắc chắn nó là một công cụ rất đơn giản để nhanh chóng đăng tải bất kỳ trang đích nào với các hiệu ứng đáng kinh ngạc.

Tags:

Các tin liên quan