使用Particles.js制作出仿知乎超炫粒子动态背景效果代码介绍-tutorial js-php.cn

使用Particles.js制作出仿知乎超炫粒子动态背景效果代码介绍

巴扎黑

Lepaskan： 2018-05-11 14:43:56

asal

4922 orang telah melayarinya

本文给大家分享Particles.js基于Canvas画布创建粒子颗粒效果，代码非常简单，需要的朋友参考下吧

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

上图

上图:

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

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

操作过程：

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

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

参考官方demo

直接在js里面写配置

<script type="text/javascript">
// particlesJS.load(&#39;particles&#39;, &#39;./js/app/particles.json&#39;, function() {
//  console.log(&#39;callback - particles.js config loaded&#39;);
// });
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>

Salin selepas log masuk

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

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

Atas ialah kandungan terperinci 使用Particles.js制作出仿知乎超炫粒子动态背景效果代码介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!