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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/19 5:00:30 · 阅读 1.2k tsParticles 实战：用粒子动画打造 Web 动态背景
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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考