企业官网建设流程全解析

零依赖的 tsParticles 完整指南：5分钟给网站加上粒子动态背景

【免费下载链接】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

tsParticles 是一款零依赖的 TypeScript 粒子动画库，能把网页变成带粒子、烟花、彩屑的动态背景，适合想快速给站点加交互视觉效果的开发者。

🖥️ 你的页面还差一个会动的背景

打开大多数网站，第一眼的背景要么是纯色，要么是静态图。你不需要重做设计稿就能让它动起来——tsParticles 在 Canvas 上直接渲染粒子，整个引擎没有第三方运行时依赖，按需加载的包都很小。它内置了雪花、烟花、彩屑、矩阵数字雨等 20 多种预设，并且为 React、Vue、Angular、Svelte 等主流框架都提供了官方组件。

⏱️ 最快接入方式：装完包就能看到效果

最短路径只有一条：用包管理器装核心引擎，然后调用tsParticles.load传一段配置。

npm install @tsparticles/engine

import { tsParticles } from "@tsparticles/engine"; await tsParticles.load({ id: "tsparticles", options: { particles: { number: { value: 60 }, color: { value: "#ffffff" }, move: { speed: 1 } } } });

保存后刷新页面，白点就已经在飘了。其余安装方式一句话带过：想省事的可以引入tsparticles这个 npm 全量包，配合loadFull一行加载全部功能；老 particles.js 用户可以用@tsparticles/pjs兼容包平滑迁移；不想装构建工具的，直接引 CDN 单文件 bundle 即可，详见 bundles/ 目录。

✨ 它最能打的三件事

鼠标一靠近，粒子就躲开

这是最容易被访客注意到的效果：把interactivity.events.onHover.mode设为repulse，粒子就会在鼠标靠近时散开，点击时再用push推入新粒子，grab、attract、bubble等模式都在interactions/external/下，改一个字符串就能切换手感。

一键换上雪花皮肤

不想自己调参数时，直接用预设。装一个预设包、注册它、按名字加载，雪花就下起来了：

import { loadSnowPreset } from "@tsparticles/preset-snow"; import { tsParticles } from "@tsparticles/engine"; await loadSnowPreset(tsParticles); await tsParticles.load({ preset: "snow" });

小屏自动减粒子

在responsive数组里按断点覆盖配置，屏幕越窄粒子越少、越慢，移动端不会卡成幻灯片：

responsive: [{ breakpoint: 768, options: { particles: { number: { value: 30 } } } }]

这套断点机制由plugins/responsive/实现，断点内任何配置项都可以单独覆盖。

🧩 换个技术栈也能跑

不用重写逻辑，各框架的官方组件在wrappers/目录里，选型建议：React 项目装@tsparticles/react，Vue 3 用@tsparticles/vue3（Vue 2 有对应的@tsparticles/vue2），Angular 用@tsparticles/angular，Svelte 用@tsparticles/svelte。jQuery、Preact、Solid、Riot、Web Components、Astro、Qwik 也都有，装完把引擎初始化函数传给组件的init属性就能用，写法统一。

⚠️ 新手容易踩的坑

1. 别一上来就 loadFull。全量包什么都带，包体积也最大；只用到基础粒子时，@tsparticles/engine加@tsparticles/slim（或 basic）就够了，用到的形状、更新器、交互再按包名单独装。
2. 粒子和帧率要按设备调。移动端建议把数量压到 30–50 个，配合fpsLimit: 60（弱设备可降到 30）省电省 CPU；数量还可以交给number.density按屏幕面积自动缩放。
3. 先跑通预设再改配置。直接手调几十个字段容易改乱，先用loadSnowPreset这类预设拿到一份完整配置，再逐项改成自己想要的，效率最高。

🧭 上手之后往哪走

• 想改某个具体行为：markdown/Options.md 列出了全部配置项，markdown/Options/下每个字段一篇详解
• 想抄现成效果：presets/ 有 20 多个预设（snow、fireworks、matrix、confetti……），utils/configs/里还有 200 多份可直接引用的配置
• 想看真实演示：demo/vanilla_new/ 是官方在线 demo 的源码，demo/目录下每个框架都有一整套示例工程
• 想自己造效果：参考shapes/、updaters/、interactions/的插件写法，用cli/commands/create-effect/这类脚手架命令可以生成插件模板

如果要把整个仓库拉下来研究，执行：

git clone https://gitcode.com/GitHub_Trending/ts/tsparticles

背景动起来的网站，访客停留的时间往往更长——现在就 clone 下来跑一遍 demo，把你的第一个动态背景加上去吧。

【免费下载链接】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