粒子滚动
选定线条下方的内容化为漂浮细沙。向下滚动，页面会逐粒重新拼合。
html-in-canvas
演示图片
滚动照片，观察像素经过分界线时散成细沙，再重新聚拢。
安装
本地演示保留原有效果，背景替换为 LeiBox 选定的画面。
查看原作者 ↗代码
源码与许可说明请查看原作者页面。
查看原作者 ↗API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
point成形线在视口中的比例位置；内容向上滚过此线时聚合，回到下方时重新溶解。 | number | 0.68 |
band粒子逐渐重新聚合的过渡带高度，单位为 CSS 像素。 | number | 420 |
density颗粒间距，单位为 CSS 像素；值越小沙粒越细密。 | number | 2 |
size完全散开时的尘埃颗粒尺寸，单位为 CSS 像素；落定时颗粒会长大并覆盖其单元。 | number | 1.25 |
spread粒子偏离原位的最大距离，单位为 CSS 像素。 | number | 220 |
gravity散开粒子云的向下偏移（-1 至 1），如沙粒沉降；负值使其上浮。 | number | 0.35 |
drift散开粒子的闲置浮动速度（0 至 1），0 冻结粒子云。 | number | 0.7 |
swirl粒子飞回原位时的侧向弧线幅度，单位为 CSS 像素。 | number | 60 |
stagger各粒子重新聚合时序的随机程度（0 至 1）。 | number | 0.7 |
fade完全散开粒子的透明度（0 至 1）。 | number | 0.85 |
settle显现抵达后，一行尘埃凝聚为页面所需的秒数。 | number | 1.2 |
smoothing阻尼滚动追上真实滚动所需的秒数，值越高越有流动感。 | number | 0.6 |
className应用到包装元素的 CSS 类。 | string |