基于Particles.js制作超炫粒子动态背景效果(仿知乎)


Posted in Javascript onSeptember 13, 2017

好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果。

上图

基于Particles.js制作超炫粒子动态背景效果(仿知乎)

上图: 

感觉有比格,就照着弄了一个,玩玩。

基于Particles.js制作超炫粒子动态背景效果(仿知乎)

github: https://github.com/VincentGarreau/particles.js/

操作过程:

网上有基本流程,可以参考一下,不过直接用在登录页面 会有小bug,需要调整下。

1、首先在页面中引入particles.js文件。

<script src="js/particles.js"></script>

2、在页面中使用一个div来作为放置粒子的容器。[一般放最底部,css 需要改进一下]

<div id="particles"></div>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰,会去抢风头,不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

3、加载配置文件:  网上讲 用load()方法 还得弄个配置的json文件,光路径 就搞残了我。

                  参考官方demo  http://codepen.io/VincentGarreau/pen/pnlso

                  直接在js里面写配置

<script type="text/javascript">
// particlesJS.load('particles', './js/app/particles.json', function() {
//  console.log('callback - particles.js config loaded');
// });
particlesJS("particles", {
 "particles": {
  "number": {
   "value": 30,
   "density": {
    "enable": true,
    "value_area": 800
   }
  },
  "color": {
   "value": "#ffffff"
  },
  "shape": {
   "type": "circle",
   "stroke": {
    "width": 0,
    "color": "#000000"
   },
   "polygon": {
    "nb_sides": 5
   },
   "image": {
    "src": "img/github.svg",
    "width": 100,
    "height": 100
   }
  },
  "opacity": {
   "value": 0.5,
   "random": false,
   "anim": {
    "enable": false,
    "speed": 1,
    "opacity_min": 0.1,
    "sync": false
   }
  },
  "size": {
   "value": 10,
   "random": true,
   "anim": {
    "enable": false,
    "speed": 50,
    "size_min": 0.1,
    "sync": false
   }
  },
  "line_linked": {
   "enable": true,
   "distance": 300,
   "color": "#ffffff",
   "opacity": 0.4,
   "width": 2
  },
  "move": {
   "enable": true,
   "speed": 8,
   "direction": "none",
   "random": false,
   "straight": false,
   "out_mode": "out",
   "bounce": false,
   "attract": {
    "enable": false,
    "rotateX": 600,
    "rotateY": 1200
   }
  }
 },
 "interactivity": {
  "detect_on": "canvas",
  "events": {
   "onhover": {
    "enable": false,
    "mode": "repulse"
   },
   "onclick": {
    "enable": false,
    "mode": "push"
   },
   "resize": true
  },
  "modes": {
   "grab": {
    "distance": 800,
    "line_linked": {
     "opacity": 1
    }
   },
   "bubble": {
    "distance": 800,
    "size": 80,
    "duration": 2,
    "opacity": 0.8,
    "speed": 3
   },
   "repulse": {
    "distance": 400,
    "duration": 0.4
   },
   "push": {
    "particles_nb": 4
   },
   "remove": {
    "particles_nb": 2
   }
  }
 },
 "retina_detect": true
});
</script>

4,配置参数 option 以及使用:  option  github 官网页面就有详情。控制粒子数量 运动速度 什么的

   particles 用起来还是有点问题的,在chrome 下载文件后再切换到这个页面 就残废了。等解决方法。

总结

以上所述是小编给大家介绍的基于Particles.js制作超炫粒子动态背景效果(仿知乎),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
ext 同步和异步示例代码
Sep 18 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
js实现日期级联效果
Jan 23 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 #Javascript
Vue-Router进阶之滚动行为详解
Sep 13 #Javascript
Vue 滚动行为的具体使用方法
Sep 13 #Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 #Javascript
VUE实现一个分页组件的示例
Sep 13 #Javascript
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 #Javascript
You might like
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
Vue实现验证码功能
2019/12/03 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
初学python数组的处理代码
2011/01/04 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python中pip的安装与使用教程
2018/08/10 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python实现网站表单提交和模板
2019/01/15 Python
如何基于python操作json文件获取内容
2019/12/24 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
乌镇导游词
2015/02/02 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js
Python开发五子棋小游戏
2022/05/02 Python