创建动态粒子的轻量级JavaScript库particles.js

webweb
最后编辑于 2019年11月20日 开发

很多网站打开后都只显示一幅动态粒子图,粒子之间互相连接,鼠标一滑过就闪避让开,很有趣儿。这些网站使用的其实都是一个叫做particles.js的轻量级JavaScript库,专门显示动态粒子。


Image credit: 1024.com

如果你有一个域名,但暂时又没有具体用处的话,可以在网站上放一个particles.js。使用也很简单,把相应文件上传到相应位置后,在index.html中只需加上下面两行:

<div id="particles-js"></div>
<script src="particles.js"></script>

如果愿意的话,还可以在粒子图上面添加一幅固定图片,只需在index.html中添加类似下面代码即可:

<div>
<img src='./your.png' />
</div>

另外,在CSS文件(style.css)中的#particles-js处,可以通过设置background-color的颜色来改变背景颜色。至于其它参数,可以通过codepen.io调试后来设置。

particles.js的开发者是一位叫做Vincent Garreau的法国哥们,他现在是法国视频会议工具Livestorm的共同创始人和前端负责人。

演示页面:
https://vincentgarreau.com/particles.js/

开源代码:
https://github.com/VincentGarreau/particles.js/

在线调试:
https://codepen.io/VincentGarreau/pen/pnlso

登录注册后才能评论。