JS粒子效果插件的引入
1.登录JS插件库 www.jq22.com
2.搜索 粒子效果,选择合适的插件下载源码
3.根据源码提示将插件引入项目
3-1.引入js文件
<script type="text/javascript" src="canvas-particle.js"></script>
3-2.配置,调用CanvasParticle函数,传入配置参数即可,如果不配置则用默认配置
window.addEventListener("load", function () {
//配置
const config = {
selector: "#bannerBg",
vx: 4, //点x轴速度,正为右,负为左
vy: 4, //点y轴速度
height: 2, //点高宽,其实为正方形,所以不宜太大
width: 2,
count: 100, //点个数
color: "#000", //点颜色
stroke: "0,0,0", //线条颜色
dist: 6000, //点吸附距离
e_dist: 20000, //鼠标吸附加速距离
max_conn: 10, //点到点最大连接数
};
//调用
CanvasParticle(config);
});
推荐阅读:
扫描二维码,在手机上阅读