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/tsparticlestsParticles 是一个无依赖的 TypeScript 粒子库用于把彩屑、烟花、雪花这类粒子动画做成网页的动态背景。它提供原生 JavaScript 入口和主流框架的官方组件适合需要给站点加前端背景特效的前端开发者无论是原生页面还是框架项目都能直接接入。5 分钟跑通 tsParticles 粒子背景环境要求Node.js 加任意包管理器npm/yarn/pnpm如果只想试效果用 CDN 加载一个script也行。安装国内网络下建议配置好 npm 镜像源再执行npm install tsparticles/engine tsparticles/slim引擎负责核心渲染slim 是最常用的功能包组合想要全部功能可改用tsparticles/all。最小可运行示例import { tsParticles } from tsparticles/engine; import { loadSlim } from tsparticles/slim; await loadSlim(tsParticles); await tsParticles.load({ id: tsparticles, options: { background: { color: #0d1117 }, particles: { number: { value: 60 }, move: { enable: true }, }, }, });这段代码先注册 slim 功能包再加载一个深色底、60 个粒子、开启运动的实例。注意id必须与页面上容器的 id 一致否则找不到挂载点。跑起来后你会看到深色背景上的粒子持续随机移动把窗口缩放到不同尺寸画布也会跟着自适应。tsParticles 能做什么预设效果官方预设覆盖 confetti彩屑、fireworks烟花、snow雪花、links连线等场景。配置里传一个preset字符串就能加载再覆盖个别字段微调即可。鼠标与 DOM 交互interactivity支持 hover、click 等事件配合 attract、repulse、bubble、grab 等模式做鼠标靠近粒子被推开这类响应很直接。响应式规则responsive数组按断点切换粒子密度、速度等参数大屏多放几个、小屏降一档避免手机端卡顿。插件化扩展发射器emitters、多边形遮罩、音效等能力都是独立包按需安装不用的功能不占体积。参数速查一分钟看懂粒子背景配置整个配置就是一棵options树核心分三块particles外观、数量、运动、连线、边界行为、interactivity鼠标和 DOM 交互、background加fpsLimit、pauseOnBlur这类性能参数。所有字段都有默认值只写你要改的部分即可{ fpsLimit: 60, pauseOnBlur: true, particles: { number: { value: 80 }, links: { enable: true, distance: 120 } } }number.value控制粒子总数links.enable打开后距离小于 120px 的粒子之间会画连线这就是经典连线网效果。完整字段列表和每一项的类型定义可以直接读仓库里的参数指南 markdown/Options.md按组跳转不用翻源码。框架支持一览每个框架都有独立维护的官方封装包装了对应包就能按组件方式使用框架组件/包名安装命令Reacttsparticles/reactnpm install tsparticles/reactVue 3tsparticles/vue3npm install tsparticles/vue3Vue 2tsparticles/vue2npm install tsparticles/vue2Angulartsparticles/angularnpm install tsparticles/angularSveltetsparticles/sveltenpm install tsparticles/sveltePreacttsparticles/preactnpm install tsparticles/preactSolidtsparticles/solidnpm install tsparticles/solidjQuerytsparticles/jquerynpm install tsparticles/jqueryQwiktsparticles/qwiknpm install tsparticles/qwikAstrotsparticles/astronpm install tsparticles/astroWeb Componentstsparticles/webcomponentsnpm install tsparticles/webcomponents这些封装的源码都放在仓库的 wrappers/ 目录下想看某个框架的具体用法直接读对应子目录的 README 即可。实用技巧与避坑先加载插件包再传对应配置emitters、polygonMask、sounds 等选项来自独立插件包如果没先load对应包就传这些配置字段会被忽略现象是配了没反应。别混用旧版命名这是从 particles.js 迁移过来的项目旧版的retina_detect、fps_limit这类 snake_case 键名已换成 camelCasedetectRetina、fpsLimit老配置直接照搬会有字段不生效。粒子数量从 60~80 起步数量是帧率最大的消耗项先用小数值确认交互和样式没问题再逐步上调用fpsLimit限制帧率并开启pauseOnBlur让标签页切走后自动暂停动画。tsParticles 把引擎、功能包、框架封装拆得比较干净装引擎、选预设或手调参数、按框架选组件三步就能落地。更多细节从 README.md 的预设目录看起核心渲染逻辑在 engine/src/。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考