无需登录 数据私有 本地保存

Particles.js 配置生成器 - 粒子背景可视化定制

9
0
0
0
Loading particles.js...
80 particles
Presets:

80
3
8
#4a90d9
0.8
3

150
#4a90d9
1
0.5

200

#1a1a2e
0
#000000

Higher particle counts may impact performance on mobile devices.

Configuration JSON
Copy this config and use it with particlesJS() in your project.
Frequently Asked Questions

particles.js is a lightweight, dependency-free JavaScript library that creates animated particle backgrounds on HTML canvas elements. It supports various particle shapes (circles, triangles, stars, polygons), customizable colors, connection lines between nearby particles, and interactive hover/click effects. It's widely used for hero sections, landing pages, and background visual effects to add dynamism to websites without heavy video or GIF assets.

Add particles.js via CDN and initialize it with your configuration:

<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<div id="particles-js"></div>
<script>
particlesJS('particles-js', {
  // Paste your generated config here
});
</script>

Make sure the container div has a defined height via CSS for the particles to be visible.

Yes, you can create multiple particle instances by calling particlesJS() with different container IDs and configurations. Each instance runs independently on its own canvas. However, be mindful of performance — running multiple high-particle-count instances simultaneously can slow down the page, especially on mobile devices. Consider using lower particle counts for secondary instances.

Particle colors can be set as a single hex value (e.g., "#ff6b6b") or an array of colors for random distribution. Shapes are configured via the shape.type property — supported types include circle, edge (square), triangle, polygon, and star. For polygon and star shapes, you can set the number of sides/points using shape.polygon.nb_sides. You can also add optional stroke outlines to particles for a more defined look.

particles.js supports hover and click interactivity modes. On hover, you can set modes like grab (draws lines from cursor to nearby particles), bubble (enlarges particles near cursor), or repulse (pushes particles away). On click, you can push (add new particles), remove (delete particles), bubble, or repulse. The interaction radius is controlled by interactivity.detect_on and interactivity.events.resize settings. Use this generator to visually tune these parameters.

particles.js uses HTML5 Canvas for rendering, which is generally efficient. Performance depends primarily on particle count, connection lines (which require distance calculations between particles), and device capabilities. For mobile devices, we recommend keeping particle count under 100 and disabling connection lines for smooth 60fps performance. Desktop browsers can typically handle 200-300 particles with lines enabled. Always test on target devices before deploying.

particles.js automatically handles canvas resizing when the interactivity.detect_on is set to "window" and interactivity.events.resize is true (both are defaults). The canvas will resize with the browser window. To ensure the container itself is responsive, set its height using relative units like vh or percentage values in CSS. On mobile, you may want to reduce particle count using JavaScript media queries or CSS media queries combined with different configs.

Yes! particles.js supports image-based particles. Set shape.type to "image" and provide the image URL in shape.image.src. You can specify the image dimensions with shape.image.width and shape.image.height. This works great for logos, icons, or custom graphics. Note that images should be relatively small for good performance, and CORS policies may apply if loading from external domains.
🔧 相关工具