零依赖的 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 粒子动画库能把网页变成带粒子、烟花、彩屑的动态背景适合想快速给站点加交互视觉效果的开发者。️ 你的页面还差一个会动的背景打开大多数网站第一眼的背景要么是纯色要么是静态图。你不需要重做设计稿就能让它动起来——tsParticles 在 Canvas 上直接渲染粒子整个引擎没有第三方运行时依赖按需加载的包都很小。它内置了雪花、烟花、彩屑、矩阵数字雨等 20 多种预设并且为 React、Vue、Angular、Svelte 等主流框架都提供了官方组件。⏱️ 最快接入方式装完包就能看到效果最短路径只有一条用包管理器装核心引擎然后调用tsParticles.load传一段配置。npm install tsparticles/engineimport { 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/reactVue 3 用tsparticles/vue3Vue 2 有对应的tsparticles/vue2Angular 用tsparticles/angularSvelte 用tsparticles/svelte。jQuery、Preact、Solid、Riot、Web Components、Astro、Qwik 也都有装完把引擎初始化函数传给组件的init属性就能用写法统一。⚠️ 新手容易踩的坑别一上来就 loadFull。全量包什么都带包体积也最大只用到基础粒子时tsparticles/engine加tsparticles/slim或 basic就够了用到的形状、更新器、交互再按包名单独装。粒子和帧率要按设备调。移动端建议把数量压到 30–50 个配合fpsLimit: 60弱设备可降到 30省电省 CPU数量还可以交给number.density按屏幕面积自动缩放。先跑通预设再改配置。直接手调几十个字段容易改乱先用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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考