php粒子,轻量级的星空粒子插件particles.js

【温馨提示】源码包解压密码：www.youhutong.com

效果图：

描述说明：

导入particles.min.js 与  app.js

app.js 是参数配置文件

配置文件参数说明我都帮你们写好了，配置完可以自己把注释删了{

"particles": {

"number": {

"value": 160,//数量

"density": {

"enable": true, //启用粒子的稀密程度

"value_area": 800 //区域散布密度大小

}

},

"color": {

"value": "#ffffff" //原子的颜色

},

"shape": {

"type": "circle", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"]

"stroke": {

"width": 0, //原子的宽度

"color": "#000000" //原子颜色

},

"polygon": {

"nb_sides": 5 // 原子的多边形边数

},

"image": {

"src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png"

"width": 100, //图片宽度

"height": 100 //图片高度

}

},

"opacity": {

"value": 1, //不透明度

"random": true, //随机不透明度

"anim": {

"enable": true, //渐变动画

"speed": 1, // 渐变动画速度

"opacity_min": 0, //渐变动画不透明度

"sync": true

}

},

"size": {

"value": 3, //原子大小

"random": true, // 原子大小随机

"anim": {

"enable": false, // 原子渐变

"speed": 4, //原子渐变速度

"size_min": 0.3,

"sync": false

}

},

"line_linked": {

"enable": false, //连接线

"distance": 150, //连接线距离

"color": "#ffffff", //连接线颜色

"opacity": 0.4, //连接线不透明度

"width": 1 //连接线的宽度

},

"move": {

"enable": true, //原子移动

"speed": 1, //原子移动速度

"direction": "none", //原子移动方向   "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left"

"random": true, //移动随机方向

"straight": false, //直接移动

"out_mode": "out", //是否移动出画布

"bounce": false, //是否跳动移动

"attract": {

"enable": false, // 原子之间吸引

"rotateX": 600, //原子之间吸引X水平距离

"rotateY": 600  //原子之间吸引Y水平距离

}

}

},

"interactivity": {

"detect_on": "canvas", //原子之间互动检测 "canvas", "window"

"events": {

"onhover": {

"enable": true, //悬停

"mode": "bubble" //悬停模式      "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"]

},

"onclick": {

"enable": false,  //点击效果

"mode": "repulse"  //点击效果模式   "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"]

},

"resize": true // 互动事件调整

},

"modes": {

"grab": {

"distance": 100, //原子互动抓取距离

"line_linked": {

"opacity": 0.8  //原子互动抓取距离连线不透明度

}

},

"bubble": {

"distance": 250, //原子抓取泡沫效果之间的距离

"size": 4, // 原子抓取泡沫效果之间的大小

"duration": 2, //原子抓取泡沫效果之间的持续事件

"opacity": 1, //原子抓取泡沫效果透明度

"speed": 3

},

"repulse": {

"distance": 400, //击退效果距离

"duration": 0.4 //击退效果持续事件

},

"push": {

"particles_nb": 4 //粒子推出的数量

},

"remove": {

"particles_nb": 2

}

}

},

"retina_detect": true

}

浏览器启用弹出窗口过滤功能，将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了！

【温馨提示】源码包解压密码：www.youhutong.com

郑重声明：

1、本站源码仅供个人学习研究和交流使用，请于下载后二十四小时内删除

2、本站大多资源来源于互联网、用户分享，仅供学习交流使用，本站不提供任何技术支持

3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。

4、如侵犯到任何版权问题，请立即告知本站(立即在线告知)，本站将及时删除并致以最深的歉意