企业官网建设流程全解析

tsParticles 实战：用粒子动画打造 Web 动态背景

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles

先别加视频了，给首页换个粒子背景试试

首页想有点动感，最省事的办法通常是贴一段循环视频，但体积大、加载慢，低端设备上还容易卡。换个思路：用 Canvas 画一层动态粒子背景，几个 KB 的代码就能做出持续变化的画面。tsParticles 就是干这件事的库，纯 TypeScript 写的，不依赖任何第三方库，直接跑在浏览器里。

它是什么：按需装配的 Canvas 粒子动画库

tsParticles 是一个 Canvas 粒子动画库，把背景、彩纸、烟花这类视觉效果的绘制、更新和交互逻辑封装成了插件，你按需求装配，装多少用多少。

两点让它和"一个 js 文件搞定"的粒子库拉开差距：一是模块化，引擎、形状、交互、更新器都是独立包，只装需要的部分；二是官方预设覆盖节日和自然场景，一行配置就能出效果。框架侧则提供了 React 等 20 多个框架封装，组件形态接入，不碰原生 DOM。

挑功能只装你要的模块

官网首页背景想加个漂浮粒子效果，没必要为此拉进整套烟花、彩纸代码。引擎本身是 核心引擎模块，每个能力都是独立包：要连线装 links 交互，要雪就装 snow 预设，体积自己控制。

// 只装基础效果，页面不需要其他能力时体积最小 import { Engine } from "@tsparticles/engine"; import { loadSlim } from "@tsparticles/slim"; const engine = new Engine(); await loadSlim(engine);

一行预设换掉整个背景方案

不想调几十个参数？snow、matrix、fireworks、confetti 这类场景都有官方预设包，装完加载一下就能直接用。以雪花为例，源码在 presets/snow/，一个包搞定。

// 加载雪花预设，整段背景就这一行配置 import { tsParticles } from "tsparticles"; import { loadSnowPreset } from "@tsparticles/preset-snow"; await loadSnowPreset(tsParticles); await tsParticles.load({ id: "tsparticles", preset: "snow" });

鼠标动效是配置出来的

粒子跟着鼠标走、被推开、被吸引，这类交互不用手写碰撞和缓动逻辑。interactivity配置里给 hover 和 click 各绑一个 mode，参数直接调：

// 悬停排斥、点击追加粒子的交互配置 interactivity: { events: { onHover: { enable: true, mode: "repulse" }, onClick: { enable: true, mode: "push" } }, modes: { repulse: { distance: 100, duration: 0.4 }, push: { quantity: 4 } } }

密度按屏幕面积自动缩放

大屏上粒子数量不变，密度就显得稀。number.density会按容器面积动态算数量，手机上自动减少，不用手写一堆断点判断，帧率也更稳。

// 粒子数量按容器面积自动换算 particles: { number: { value: 100, density: { enable: true, area: 800 } } }

两步跑通第一个 Demo

装包

# 引擎加完整功能包，预设按需另装 npm i @tsparticles/engine tsparticles

最小可运行示例

// 这段代码在 id 为 tsparticles 的元素里启动默认粒子效果 import { tsParticles } from "tsparticles"; import { loadFull } from "tsparticles"; await loadFull(tsParticles); await tsParticles.load({ id: "tsparticles", options: { background: { color: "#111111" }, particles: { color: { value: "#ffffff" }, move: { enable: true, speed: 1.5 } } } });

三个真实场景的落法

活动页节日氛围背景

圣诞、春节活动页想加氛围，不用等设计切图。装上对应预设包，preset指向名字即可，配置还能继续叠自定义项。

// 雪花预设 + 自定义背景色 await tsParticles.load({ id: "tsparticles", preset: "snow", background: { color: "#0b1c2c" } });

科技感页面的数字雨

技术分享、黑客松页面想要"矩阵风"，装@tsparticles/preset-matrix，预设已包含字符形状、拖尾和发光，直接加载即可。

产品官网的轻量交互层

官网首屏背景要克制，粒子少一点、慢一点，鼠标靠近时轻轻推开。调number、move.speed和 repulse 距离三个参数，就能从"热闹"切到"安静"。

// 少量粒子 + 慢速运动 + 大半径轻微排斥 options: { particles: { number: { value: 40 }, move: { speed: 0.8 } }, interactivity: { events: { onHover: { enable: true, mode: "repulse" } }, modes: { repulse: { distance: 160, duration: 0.6 } } } }

继续深入的几个方向

• 20 个官方预设：presets/
• 20 套粒子配色：palettes/
• 粒子行为更新器：updaters/
• 全功能捆绑包：bundles/full/
• 各框架组件封装：wrappers/

从背景开始

tsParticles 的定位就一句话：按需装配的 Canvas 粒子动画，预设开箱即用，细节随时可调。想先看效果，直接浏览 demo/vanilla_new/ 目录里的示例页面；想动配置，翻 markdown/Options/ 下的配置文档，比翻源码快得多。

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles