✨Effect Lab
Read the full guide完整技术长文 A particle is four numbers and a deadline粒子就是四个数,加一个截止时间
⛲

Particle Fountain 粒子喷泉

Particles leave the bottom centre with upward velocity, and gravity plus a translate() does the rest. 粒子从底部中央以向上速度喷出,剩下的交给重力和一个 translate()。

DOMProjectile physicstransform
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

Each particle starts with vy between -8 and -12 and vx within ±2. Every frame vy increases by 0.3, which arcs the trajectory from up to down, and the rendered position is a plain translate(x, y). The loop stops when y becomes positive, meaning the particle has fallen back past its origin. 每个粒子的初始 vy 在 -8 到 -12 之间,vx 在 ±2 内。每帧 vy 加 0.3,轨迹就从上升转成下落,而实际渲染位置只是一个 translate(x, y)。y 变成正值(也就是落回起点以下)时循环结束并销毁。

What to change可以改的地方

  • 1Randomise vx more widely for a wider, messier fountain.
  • 2Add opacity tied to y so particles fade as they fall back down.
  • 1把 vx 的随机范围放大,喷泉会变宽、变乱。
  • 2让透明度跟随 y,下落时逐渐变淡,会更有重量感。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

fountain.html