知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的。刚好目前的项目是利用vue框架的,两个凑在一起学了。
讲道理,这个用得好的话,页面是可以很酷的,譬如我现在写的项目
酷酷的登录页
嘻嘻~
<>强安装particles.js
<代码> npm安装,节省particles.js
<>强配置particles.js
这个数据是用于控制粒子在页面中所呈现的状态。
{
“粒子”:{
“数量”:{
“价值”:60岁
“密度”:{
“启用”:没错,
“value_area”: 800
}
},
“颜色”:{
“价值”:“# ffffff”
},
“形状”:{
“类型”:“圈”,
"中风":{
“宽度”:0,
“颜色”:“000000 #”
},
“多边形”:{
“nb_sides”: 5
},
"图像":{
“src”:“img/github.svg”,
“宽度”:100年,
“高度”:100
}
},
“不透明度”:{
“价值”:0.5,
“随机”:假的,
"动物":{
“启用”:假的,
“速度”:1、
“opacity_min”: 0.1,
“同步”:假的
}
},
"大小":{
“价值”:3,
“随机”:没错,
"动物":{
“启用”:假的,
“速度”:40岁
“size_min”: 0.1,
“同步”:假的
}
},
" line_linked ": {
“启用”:没错,
“距离”:150年,
“颜色”:“# ffffff”,
“不透明度”:0.4,
“宽度”:1
},
“移动”:{
“启用”:没错,
“速度”:4
“方向”:“没有”,
“随机”:假的,
“连续”:假的,
“out_mode”:“出去”,
“反弹”:假的,
“吸引”:{
“启用”:假的,
“rotateX”: 100年,
“rotateY”: 1200
}
}
},
"互动":{
“detect_on”:“窗口”,
"事件":{
" onhover ": {
“启用”:没错,
“模式”:“抓住”
},
" onclick ": {
“启用”:没错,
“模式”:“推”
},
“调整”:真的
},
"模式":{
“抓”:{
“距离”:140年,
" line_linked ": {
“不透明度”:1
}
},
“泡沫”:{
“距离”:400年,
“大小”:40岁
“持续时间”:2
“不透明度”:8
“速度”:3
},
"拒绝":{
“距离”:200年,
“持续时间”:0.4
},
“推”:{
“particles_nb”: 4
},
"删除":{
“particles_nb”: 2
}
}
},
“retina_detect”:真的
}
这个就是动态粒子要展示的位置。
& lt; div id=傲Ｗ印弊４? lt;/div>
因为涉及到dom树,所以必须在挂载结束后初始化particles.js。第一个参数id就是你在模板上取得id名,像我要写的话就是粒子。第二个参数是你的数据存放的路径,个人建议使用相对路径。
安装(){
particlesJS。负载(“id”,“particles.data路径”);
}
#{粒子
位置:绝对的;
宽度:100%;
高度:100%;
background - color: # b61924;
平铺方式:不再重演;
background-size:封面;
背景位置:50% - 50%;
}
讲到这里会发现,还有一个最重要的点没讲出来,恩,就是粒子。js的引入。当你的使用范围比较小时,可以直接在当前vue文件的脚本中引入,即
//vue文件
从“particles.js”进口颗粒
又或者你觉得这样不好管理,一定要放在主要文件中也可以
//主要文件
从“particles.js”进口颗粒
Vue.use(粒子)
最后呈现的效果如下
以上所述是小编给大家介绍的JS库中的Particles.js在vue上的运用案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
