粒子雨背景动效

向下滚动页面,观察粒子密度随滚动距离变化。右上角可调节参数。

↓ 向下滚动体验粒子密度变化 ↓

性能优化

使用 Canvas 2D 渲染,所有粒子在同一上下文中绘制,避免 DOM 操作开销。requestAnimationFrame 保证 60fps 流畅动画,离屏粒子不会触发重排或重绘。

滚动密度联动

页面滚动越深,粒子密度越高。通过滚动位置映射粒子数量上限,实时增减活跃粒子数,营造纵深沉浸感。

颜色随机切换

每个粒子在生成时随机选取颜色,支持多种预设配色方案。粒子在生命周期内保持颜色不变,新一代粒子重新采样,形成自然流动的色彩混合效果。

可调参数

右上角控制面板支持实时调节下落速度、基础密度、粒子大小和颜色模式。所有参数即时生效,无需刷新页面。

自适应画布

Canvas 自动适配窗口大小和 DPR(设备像素比),在高分辨率屏幕上保持清晰锐利的粒子渲染效果。

更多内容

继续滚动查看更多粒子密度变化效果。粒子会在屏幕底部淡出消失,然后重新从顶部生成,形成循环往复的粒子雨效果。