tsParticles Confetti Parade 预设一行代码打造可拖拽的彩带游行特效【免费下载链接】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 官方预设tsparticles/preset-confetti-parade展开讲解如何通过「安装预设 → 注册加载函数 → 设置preset选项」三步快速在页面中渲染出由屏幕两侧发射、受重力下落并旋转翻滚的彩带游行confetti parade / celebration streamer效果。读完本文你将掌握该预设的 CDN 与模块化安装方式、预设选项的自定义技巧、底层依赖basic 运行时、emitters 发射器、confetti 调色板以及 5 个运动型 updater的协作原理以及避开常见使用陷阱的实战方法。本预设生成的粒子基于 Canvas 渲染默认开启全屏模式fullScreen.enable: true非常适合作为活动落地页、产品发布页、节日庆祝页的整屏彩带动画背景。一、预设是什么Confetti Parade 的效果与定位tsparticles/preset-confetti-parade是 tsParticles 官方预设之一仓库位于 presets/confettiParade它复用了官方 confetti 调色板 中的缤纷色彩配合tsparticles/plugin-emitters在屏幕左右两侧各放置一个「彩带发射器」让粒子以斜向上抛的轨迹飞出、在重力作用下下落并同时叠加旋转rotate、倾斜tilt、滚动roll与左右摇摆wobble四种运动最终呈现出类似游行花车两侧喷洒彩带的视觉效果。该预设还通过tsparticles/plugin-motion提供对「减少动态效果」prefers-reduced-motion的无障碍支持。根据 package.json 的描述它的定位是 tsParticles preset for creating confetti parade and celebration streamer effects用于创建彩带游行与庆祝彩带效果的预设。二、三步快速上手原文档给出了一份「快速检查清单」完整整理如下安装tsparticles/engine或直接使用下方 CDN bundle在tsParticles.load(...)之前调用loadConfettiParadePreset(engine)完成预设注册在 options 中设置preset: confettiParade小写连字符写法confetti-parade同样有效。2.1 CDN / Vanilla JS / jQuery 方式通过 jsDelivr 引入官方构建好的 bundle注意版本号4对应 tsParticles v4 主版本script srchttps://cdn.jsdelivr.net/npm/tsparticles/preset-confetti-parade4/tsparticles.preset.confettiParade.bundle.min.js/script脚本加载完成后loadConfettiParadePreset与tsParticles会被挂载到全局对象上。这一点在源码中有直接体现bundle.ts 通过globalObject.loadConfettiParadePreset loadConfettiParadePreset和globalObject.tsParticles tsParticles完成全局导出而面向浏览器单文件的 browser.ts 同样挂载了globalObject.loadConfettiParadePreset。随后即可初始化(async engine { await loadConfettiParadePreset(engine); await engine.load({ options: { preset: confettiParade, // 或 confetti-parade }, }); })(tsParticles);2.2 npm / 模块化方式ESM使用包管理器安装预设与引擎npm install tsparticles/engine tsparticles/preset-confetti-parade在应用入口中导入并注册import { tsParticles } from tsparticles/engine; import { loadConfettiParadePreset } from tsparticles/preset-confetti-parade; await loadConfettiParadePreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: confettiParade, }, });2.3 框架组件库方式React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等官方组件库的用法一致把组件默认调用的loadFull/loadSlim或类似函数替换为loadConfettiParadePreset即可options 的写法对所有组件库完全相同。三、两个预设名称与懒加载lazy入口源码 index.ts 中定义了presetNames [confettiParade, confetti-parade]注册时通过engine.pluginManager.addPreset(name, options, false)同时注册了两个名称因此preset: confettiParade驼峰与preset: confetti-parade连字符完全等价可按团队风格任选其一。此外该预设提供了独立的懒加载入口tsparticles/preset-confetti-parade/lazy。其实现位于 index.lazy.ts通过动态import(tsparticles/basic/lazy)、import(tsparticles/updater-wobble/lazy)等按需加载全部依赖模块适合对首屏体积敏感、希望把彩带逻辑拆分为独立 chunk 的场景package.json 的exports字段中已声明./lazy子路径。四、自定义彩带颜色预设默认使用 confetti 调色板的白色与红色你可以像下面这样覆盖粒子颜色示例将白、红替换为蓝色与黄绿色tsParticles.load({ id: tsparticles, options: { particles: { color: { value: [#0000ff, #00ff00], }, }, preset: confettiParade, // 或 confetti-parade }, });自定义 options 会与预设选项深合并因此只需写出需要覆盖的字段即可其余预设行为发射器、运动方式、生命周期等保持不变。4.1 更换整套调色板Confetti Parade 默认加载的是官方 confetti 调色板其注册逻辑位于 palettes/confetti/default/src/index.tsloadConfettiPalette通过engine.pluginManager.addPalette(confetti, options)注册名为confetti的调色板。若希望换用其他调色板如 confetti-gold、confetti-monochrome-blue 等可自行安装对应tsparticles/palette-*包在loadConfettiParadePreset之后调用其加载函数并在 options 中设置palette: confetti-gold之类的名称覆盖默认值。注意同一时刻只会应用一个调色板名称后注册的同名覆盖需要以实际加载顺序为准。五、预设内置的默认配置源码级拆解Confetti Parade 的完整默认选项定义在 presets/confettiParade/src/options.ts以下按功能模块梳理方便你在自定义时精准定位字段。5.1 画布与背景配置项默认值说明fullScreen.enabletrue粒子画布占满整个视口fullScreen.zIndex100画布层级位于普通页面内容之上background.color.value透明不遮挡页面原有背景适合作为覆盖式动画paletteconfetti使用 confetti 调色板着色particles.number.value0初始粒子数设为 0粒子完全由发射器产生5.2 粒子外观配置项默认值说明particles.shape.type[square, circle]方形与圆形混合模拟不同形状的彩带碎片particles.size.value5基础粒子大小pxparticles.opacity.value{ min: 0, max: 1 }透明度区间particles.opacity.animationenable: true, speed: 0.5, startValue: max, destroy: min透明度从最大值开始、粒子销毁时衰减到最小值particles.links.enablefalse关闭连线效果避免干扰彩带视觉5.3 生命与运动彩带游行的核心配置项默认值说明life.durationvalue: 10/3≈3.33s, sync: true单个粒子存活约 3.33 秒源码中lifeDuration 10 * (1/3)后自动销毁life.count1只经历一次生命周期move.enabletrue启用移动move.angle.value45抛射角度 45°move.gravityenable: true, acceleration: 9.81模拟真实重力m/s²move.speed90初始移动速度move.decay0.1速度随时间衰减move.randomtrue方向随机化增强自然感move.outModes.defaultdestroy粒子离开画布边界即销毁move.outModes.topnone顶部不销毁允许粒子抛射出顶部后回落5.4 四种旋转类运动由 4 个 updater 驱动配置项默认值说明对应依赖rotatevalue: 0~360, direction: random, 动画speed: 60粒子随机方向整体旋转tsparticles/updater-rotatetiltenable: true, value: 0~360, direction: random, 动画speed: 60粒子三维倾斜翻转tsparticles/updater-tiltrollenable: true,darken.value: 25,speed: 15~25粒子绕自身中轴滚动并在滚动时轻微变暗tsparticles/updater-rollwobbleenable: true, distance: 30,speed: -15~15粒子左右摇摆tsparticles/updater-wobble5.5 两个内建发射器emitters预设定义了confetti-left与confetti-right两个发射器参数如下配置项左发射器右发射器position.x0左边缘100右边缘position.y100/3约 1/3 高度100/3约 1/3 高度sizewidth: 0, height: 0点状发射同左startCount5050rate.delay0.1秒0.1rate.quantity10每轮 10 个10life.duration10秒10life.count11particles.move.directiontop-right向右上抛射top-left向左上抛射两个发射器以约 1/3 屏高处为起点、分别向右上和左上抛射粒子形成对称的喷泉式彩带交叉这正是游行效果的视觉来源。5.6 无障碍支持motion: { disable: true, // 检测到 prefers-reduced-motion 时关闭动画 }motion.disable由tsparticles/plugin-motion驱动当系统开启减少动态效果时动画自动暂停保证无障碍体验。六、依赖全景一个预设如何组合 10 个包原文档的 Dependencies 表格列出了该预设组合的全部依赖其加载顺序与 index.ts 中的Promise.all调用一一对应包在该预设中的角色tsparticles/basic预设依赖的基础运行时 bundle含核心引擎与基础功能tsparticles/enginetsParticles 引擎本体与预设注册机制pluginManager.addPresettsparticles/palette-confetti默认的 confetti 彩带调色板白色/红色tsparticles/plugin-emitters从可配置的发射器产生粒子tsparticles/plugin-motion处理 reduced-motion 无障碍设置tsparticles/shape-square提供方形粒子形状tsparticles/updater-life控制粒子生命周期阶段tsparticles/updater-roll添加滚动旋转运动tsparticles/updater-rotate添加旋转动画tsparticles/updater-tilt添加倾斜动画tsparticles/updater-wobble添加左右摇摆运动这些依赖同样完整声明在 package.json 的dependencies中。构建时rollup.config.js 通过loadParticlesPreset({ moduleName: confettiParade, presetName: Confetti Parade })打包出tsparticles.preset.confettiParade.bundle.min.js等产物。依赖关系可以用原文档中的 mermaid 流程图概括为七、常见陷阱Common pitfalls原文档明确列出了三类高频问题结合源码逐一说明规避方法在loadConfettiParadePreset(engine)之前就调用tsParticles.load(...)addPreset尚未执行时preset: confettiParade无法被引擎解析加载会失败。务必保证注册先于加载异步场景使用await。用空数组覆盖emitters却期望保留默认游行行为预设的彩带效果完全依赖内置的两个发射器options.ts。若在自定义 options 中写emitters: []会清空默认发射器且不会有任何粒子产生。想调整发射器时应改为覆盖其内部字段或追加新发射器而不是清空。扩展游行发射器时混用不兼容的移动方向左发射器粒子方向为top-right、右发射器为top-left见 5.5 节。新增发射器时应保持方向与位置逻辑自洽避免出现互相冲突的移动方向导致彩带异常穿插或提前出界。八、小结Confetti Parade 预设把 tsParticles 生态中「basic 运行时 emitters 发射器 confetti 调色板 4 种运动 updater motion 无障碍插件」完整组合为开箱即用的庆祝彩带方案。你只需要记住三步装包 →loadConfettiParadePreset(engine)→ 设置preset: confettiParade。若需深入定制可继续阅读引擎与插件机制engine/src/index.ts默认选项完整定义presets/confettiParade/src/options.ts调色板加载实现palettes/confetti/default/src/index.ts预设版本变更记录presets/confettiParade/CHANGELOG.md【免费下载链接】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），仅供参考 tsParticles Confetti Parade 预设：一行代码打造可拖拽的彩带游行特效
tsParticles Confetti Parade 预设一行代码打造可拖拽的彩带游行特效【免费下载链接】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 官方预设tsparticles/preset-confetti-parade展开讲解如何通过「安装预设 → 注册加载函数 → 设置preset选项」三步快速在页面中渲染出由屏幕两侧发射、受重力下落并旋转翻滚的彩带游行confetti parade / celebration streamer效果。读完本文你将掌握该预设的 CDN 与模块化安装方式、预设选项的自定义技巧、底层依赖basic 运行时、emitters 发射器、confetti 调色板以及 5 个运动型 updater的协作原理以及避开常见使用陷阱的实战方法。本预设生成的粒子基于 Canvas 渲染默认开启全屏模式fullScreen.enable: true非常适合作为活动落地页、产品发布页、节日庆祝页的整屏彩带动画背景。一、预设是什么Confetti Parade 的效果与定位tsparticles/preset-confetti-parade是 tsParticles 官方预设之一仓库位于 presets/confettiParade它复用了官方 confetti 调色板 中的缤纷色彩配合tsparticles/plugin-emitters在屏幕左右两侧各放置一个「彩带发射器」让粒子以斜向上抛的轨迹飞出、在重力作用下下落并同时叠加旋转rotate、倾斜tilt、滚动roll与左右摇摆wobble四种运动最终呈现出类似游行花车两侧喷洒彩带的视觉效果。该预设还通过tsparticles/plugin-motion提供对「减少动态效果」prefers-reduced-motion的无障碍支持。根据 package.json 的描述它的定位是 tsParticles preset for creating confetti parade and celebration streamer effects用于创建彩带游行与庆祝彩带效果的预设。二、三步快速上手原文档给出了一份「快速检查清单」完整整理如下安装tsparticles/engine或直接使用下方 CDN bundle在tsParticles.load(...)之前调用loadConfettiParadePreset(engine)完成预设注册在 options 中设置preset: confettiParade小写连字符写法confetti-parade同样有效。2.1 CDN / Vanilla JS / jQuery 方式通过 jsDelivr 引入官方构建好的 bundle注意版本号4对应 tsParticles v4 主版本script srchttps://cdn.jsdelivr.net/npm/tsparticles/preset-confetti-parade4/tsparticles.preset.confettiParade.bundle.min.js/script脚本加载完成后loadConfettiParadePreset与tsParticles会被挂载到全局对象上。这一点在源码中有直接体现bundle.ts 通过globalObject.loadConfettiParadePreset loadConfettiParadePreset和globalObject.tsParticles tsParticles完成全局导出而面向浏览器单文件的 browser.ts 同样挂载了globalObject.loadConfettiParadePreset。随后即可初始化(async engine { await loadConfettiParadePreset(engine); await engine.load({ options: { preset: confettiParade, // 或 confetti-parade }, }); })(tsParticles);2.2 npm / 模块化方式ESM使用包管理器安装预设与引擎npm install tsparticles/engine tsparticles/preset-confetti-parade在应用入口中导入并注册import { tsParticles } from tsparticles/engine; import { loadConfettiParadePreset } from tsparticles/preset-confetti-parade; await loadConfettiParadePreset(tsParticles); await tsParticles.load({ id: tsparticles, options: { preset: confettiParade, }, });2.3 框架组件库方式React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等官方组件库的用法一致把组件默认调用的loadFull/loadSlim或类似函数替换为loadConfettiParadePreset即可options 的写法对所有组件库完全相同。三、两个预设名称与懒加载lazy入口源码 index.ts 中定义了presetNames [confettiParade, confetti-parade]注册时通过engine.pluginManager.addPreset(name, options, false)同时注册了两个名称因此preset: confettiParade驼峰与preset: confetti-parade连字符完全等价可按团队风格任选其一。此外该预设提供了独立的懒加载入口tsparticles/preset-confetti-parade/lazy。其实现位于 index.lazy.ts通过动态import(tsparticles/basic/lazy)、import(tsparticles/updater-wobble/lazy)等按需加载全部依赖模块适合对首屏体积敏感、希望把彩带逻辑拆分为独立 chunk 的场景package.json 的exports字段中已声明./lazy子路径。四、自定义彩带颜色预设默认使用 confetti 调色板的白色与红色你可以像下面这样覆盖粒子颜色示例将白、红替换为蓝色与黄绿色tsParticles.load({ id: tsparticles, options: { particles: { color: { value: [#0000ff, #00ff00], }, }, preset: confettiParade, // 或 confetti-parade }, });自定义 options 会与预设选项深合并因此只需写出需要覆盖的字段即可其余预设行为发射器、运动方式、生命周期等保持不变。4.1 更换整套调色板Confetti Parade 默认加载的是官方 confetti 调色板其注册逻辑位于 palettes/confetti/default/src/index.tsloadConfettiPalette通过engine.pluginManager.addPalette(confetti, options)注册名为confetti的调色板。若希望换用其他调色板如 confetti-gold、confetti-monochrome-blue 等可自行安装对应tsparticles/palette-*包在loadConfettiParadePreset之后调用其加载函数并在 options 中设置palette: confetti-gold之类的名称覆盖默认值。注意同一时刻只会应用一个调色板名称后注册的同名覆盖需要以实际加载顺序为准。五、预设内置的默认配置源码级拆解Confetti Parade 的完整默认选项定义在 presets/confettiParade/src/options.ts以下按功能模块梳理方便你在自定义时精准定位字段。5.1 画布与背景配置项默认值说明fullScreen.enabletrue粒子画布占满整个视口fullScreen.zIndex100画布层级位于普通页面内容之上background.color.value透明不遮挡页面原有背景适合作为覆盖式动画paletteconfetti使用 confetti 调色板着色particles.number.value0初始粒子数设为 0粒子完全由发射器产生5.2 粒子外观配置项默认值说明particles.shape.type[square, circle]方形与圆形混合模拟不同形状的彩带碎片particles.size.value5基础粒子大小pxparticles.opacity.value{ min: 0, max: 1 }透明度区间particles.opacity.animationenable: true, speed: 0.5, startValue: max, destroy: min透明度从最大值开始、粒子销毁时衰减到最小值particles.links.enablefalse关闭连线效果避免干扰彩带视觉5.3 生命与运动彩带游行的核心配置项默认值说明life.durationvalue: 10/3≈3.33s, sync: true单个粒子存活约 3.33 秒源码中lifeDuration 10 * (1/3)后自动销毁life.count1只经历一次生命周期move.enabletrue启用移动move.angle.value45抛射角度 45°move.gravityenable: true, acceleration: 9.81模拟真实重力m/s²move.speed90初始移动速度move.decay0.1速度随时间衰减move.randomtrue方向随机化增强自然感move.outModes.defaultdestroy粒子离开画布边界即销毁move.outModes.topnone顶部不销毁允许粒子抛射出顶部后回落5.4 四种旋转类运动由 4 个 updater 驱动配置项默认值说明对应依赖rotatevalue: 0~360, direction: random, 动画speed: 60粒子随机方向整体旋转tsparticles/updater-rotatetiltenable: true, value: 0~360, direction: random, 动画speed: 60粒子三维倾斜翻转tsparticles/updater-tiltrollenable: true,darken.value: 25,speed: 15~25粒子绕自身中轴滚动并在滚动时轻微变暗tsparticles/updater-rollwobbleenable: true, distance: 30,speed: -15~15粒子左右摇摆tsparticles/updater-wobble5.5 两个内建发射器emitters预设定义了confetti-left与confetti-right两个发射器参数如下配置项左发射器右发射器position.x0左边缘100右边缘position.y100/3约 1/3 高度100/3约 1/3 高度sizewidth: 0, height: 0点状发射同左startCount5050rate.delay0.1秒0.1rate.quantity10每轮 10 个10life.duration10秒10life.count11particles.move.directiontop-right向右上抛射top-left向左上抛射两个发射器以约 1/3 屏高处为起点、分别向右上和左上抛射粒子形成对称的喷泉式彩带交叉这正是游行效果的视觉来源。5.6 无障碍支持motion: { disable: true, // 检测到 prefers-reduced-motion 时关闭动画 }motion.disable由tsparticles/plugin-motion驱动当系统开启减少动态效果时动画自动暂停保证无障碍体验。六、依赖全景一个预设如何组合 10 个包原文档的 Dependencies 表格列出了该预设组合的全部依赖其加载顺序与 index.ts 中的Promise.all调用一一对应包在该预设中的角色tsparticles/basic预设依赖的基础运行时 bundle含核心引擎与基础功能tsparticles/enginetsParticles 引擎本体与预设注册机制pluginManager.addPresettsparticles/palette-confetti默认的 confetti 彩带调色板白色/红色tsparticles/plugin-emitters从可配置的发射器产生粒子tsparticles/plugin-motion处理 reduced-motion 无障碍设置tsparticles/shape-square提供方形粒子形状tsparticles/updater-life控制粒子生命周期阶段tsparticles/updater-roll添加滚动旋转运动tsparticles/updater-rotate添加旋转动画tsparticles/updater-tilt添加倾斜动画tsparticles/updater-wobble添加左右摇摆运动这些依赖同样完整声明在 package.json 的dependencies中。构建时rollup.config.js 通过loadParticlesPreset({ moduleName: confettiParade, presetName: Confetti Parade })打包出tsparticles.preset.confettiParade.bundle.min.js等产物。依赖关系可以用原文档中的 mermaid 流程图概括为七、常见陷阱Common pitfalls原文档明确列出了三类高频问题结合源码逐一说明规避方法在loadConfettiParadePreset(engine)之前就调用tsParticles.load(...)addPreset尚未执行时preset: confettiParade无法被引擎解析加载会失败。务必保证注册先于加载异步场景使用await。用空数组覆盖emitters却期望保留默认游行行为预设的彩带效果完全依赖内置的两个发射器options.ts。若在自定义 options 中写emitters: []会清空默认发射器且不会有任何粒子产生。想调整发射器时应改为覆盖其内部字段或追加新发射器而不是清空。扩展游行发射器时混用不兼容的移动方向左发射器粒子方向为top-right、右发射器为top-left见 5.5 节。新增发射器时应保持方向与位置逻辑自洽避免出现互相冲突的移动方向导致彩带异常穿插或提前出界。八、小结Confetti Parade 预设把 tsParticles 生态中「basic 运行时 emitters 发射器 confetti 调色板 4 种运动 updater motion 无障碍插件」完整组合为开箱即用的庆祝彩带方案。你只需要记住三步装包 →loadConfettiParadePreset(engine)→ 设置preset: confettiParade。若需深入定制可继续阅读引擎与插件机制engine/src/index.ts默认选项完整定义presets/confettiParade/src/options.ts调色板加载实现palettes/confetti/default/src/index.ts预设版本变更记录presets/confettiParade/CHANGELOG.md【免费下载链接】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），仅供参考