particles.js使用及配置

参考：http://blog.csdn.net/csdn_yudong/article/details/53128570

这个项目中有提供demo，可以直接下载这个项目，打开demo里面的index.html文件，即可看到效果。

html：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>particles.js</title>

  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">

  <meta name="author" content="Vincent Garreau" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <link rel="stylesheet" media="screen" href="css/style.css">

</head>

<body>

<div id="particles-js"></div>

<!-- scripts -->

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

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

</body>

</html>

particles.js 是它的库，我们肯定是要引入的，app.js 是参数配置文件，我们也要引入，而 demo 中的 stats.js 就没有必要引入了。 
style.css 我们也可以引入，背景颜色是在css中设置的。

app.js

particlesJS('particles-js',

  {

    "particles": {

      "number": {

        "value": ,

        "density": {

          "enable": true,

          "value_area":

        }

      },

      "color": {

        "value": "#ffffff"

      },

      "shape": {

        "type": "circle",

        "stroke": {

          "width": ,

          "color": "#000000"

        },

        "polygon": {

          "nb_sides":

        },

        "image": {

          "src": "img/github.svg",

          "width": ,

          "height":

        }

      },

      "opacity": {

        "value": 0.5,

        "random": false,

        "anim": {

          "enable": false,

          "speed": ,

          "opacity_min": 0.1,

          "sync": false

        }

      },

      "size": {

        "value": ,

        "random": true,

        "anim": {

          "enable": false,

          "speed": ,

          "size_min": 0.1,

          "sync": false

        }

      },

      "line_linked": {

        "enable": true,

        "distance": ,

        "color": "#ffffff",

        "opacity": 0.4,

        "width":

      },

      "move": {

        "enable": true,

        "speed": ,

        "direction": "none",

        "random": false,

        "straight": false,

        "out_mode": "out",

        "attract": {

          "enable": false,

          "rotateX": ,

          "rotateY":

        }

      }

    },

    "interactivity": {

      "detect_on": "canvas",

      "events": {

        "onhover": {

          "enable": true,

          "mode": "repulse"

        },

        "onclick": {

          "enable": false,

          "mode": "push"

        },

        "resize": true

      },

      "modes": {

        "grab": {

          "distance": ,

          "line_linked": {

            "opacity":

          }

        },

        "bubble": {

          "distance": ,

          "size": ,

          "duration": ,

          "opacity": ,

          "speed":

        },

        "repulse": {

          "distance":

        },

        "push": {

          "particles_nb":

        },

        "remove": {

          "particles_nb":

        }

      }

    },

    "retina_detect": true,

    "config_demo": {

      "hide_card": false,

      "background_color": "#b61924",

      "background_image": "",

      "background_position": "50% 50%",

      "background_repeat": "no-repeat",

      "background_size": "cover"

    }

  }

);

配置说明：

键值 参数选项/ 说明 实例
particles.number.value number   数量 40
particles.number.density.enable boolean    true / false
particles.number.density.value_area number   区域散布密度大小 800
particles.color.value

HEX (string) 
RGB (object) 
HSL (object) 
array selection (HEX) 
random (string)

原子的颜色

 "#b61924" 
{r:182, g:25, b:36} 
{h:356, s:76, l:41} 
["#b61924", "#333333", "999999"] 
"random"
particles.shape.type string 
array selection 原子的形状		 "circle" 
"edge" 
"triangle" 
"polygon" 
"star" 
"image" 
["circle", "triangle", "image"]
particles.shape.stroke.width number      原理的宽度 2
particles.shape.stroke.color HEX (string)  原子颜色 "#222222"
particles.shape.polygon.nb_slides number       原子的多边形边数 5
particles.shape.image.src path link 
svg / png / gif / jpg  原子的图片可以使用自定义图片		 "assets/img/yop.svg" 
"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width number 
(for aspect ratio)    图片宽度		 100
particles.shape.image.height number 
(for aspect ratio) 图片高度		 100
particles.opacity.value number (0 to 1)   不透明度 0.75
particles.opacity.random boolean     随机不透明度 true / false
particles.opacity.anim.enable boolean            渐变动画 true / false
particles.opacity.anim.speed number            渐变动画速度 3
particles.opacity.anim.opacity_min number (0 to 1)       渐变动画不透明度 0.25
particles.opacity.anim.sync boolean true / false
particles.size.value number       原子大小 20
particles.size.random boolean       原子大小随机 true / false
particles.size.anim.enable boolean      原子渐变 true / false
particles.size.anim.speed number     原子渐变速度 3
particles.size.anim.size_min number 0.25
particles.size.anim.sync boolean true / false
particles.line_linked.enable boolean       连接线 true / false
particles.line_linked.distance number       连接线距离 150
particles.line_linked.color HEX (string)   连接线颜色 #ffffff
particles.line_linked.opacity number (0 to 1)    连接线不透明度 0.5
particles.line_linked.width number     连接线的宽度 1.5
particles.move.enable boolean     原子移动 true / false
particles.move.speed number     原子移动速度 4
particles.move.direction string              原子移动方向 "none" 
"top" 
"top-right" 
"right" 
"bottom-right" 
"bottom" 
"bottom-left" 
"left" 
"top-left"
particles.move.random boolean              移动随机方向 true / false
particles.move.straight boolean              直接移动 true / false
particles.move.out_mode string  
(out of canvas)        是否移动出画布		 "out" 
"bounce"
particles.move.bounce boolean 
(between particles)   是否跳动移动		 true / false
particles.move.attract.enable boolean           原子之间吸引 true / false
particles.move.attract.rotateX number   原子之间吸引X水平距离 3000
particles.move.attract.rotateY number  y垂直距离 1500
interactivity.detect_on string        原子之间互动检测 "canvas", "window"
interactivity.events.onhover.enable boolean    悬停 true / false
interactivity.events.onhover.mode

string 
array selection

悬停模式

 "grab"     抓取临近的
"bubble"  泡沫球效果
"repulse"  击退效果
["grab", "bubble"]
interactivity.events.onclick.enable boolean  点击效果 true / false
interactivity.events.onclick.mode

string 
array selection

点击效果模式

 "push" 
"remove" 
"bubble" 
"repulse" 
["push", "repulse"]
interactivity.events.resize boolean         互动事件调整 true / false
interactivity.events.modes.grab.distance number        原子互动抓取距离 100
interactivity.events.modes.grab.line_linked.opacity number (0 to 1)        原子互动抓取距离连线不透明度 0.75
interactivity.events.modes.bubble.distance number       原子抓取泡沫效果之间的距离 100
interactivity.events.modes.bubble.size number       原子抓取泡沫效果之间的大小 40
interactivity.events.modes.bubble.duration number    原子抓取泡沫效果之间的持续事件
(second)		 0.4
interactivity.events.modes.repulse.distance number       击退效果距离 200
interactivity.events.modes.repulse.duration number      击退效果持续事件
(second)		 1.2
interactivity.events.modes.push.particles_nb number         粒子推出的数量 4
interactivity.events.modes.push.particles_nb number 4
retina_detect boolean true / false

 

particles.js使用及配置的更多相关文章

  1. 弄个知乎的粒子动态背景_实践particles.js

    好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图:   感觉有比格,就照着弄了一个,玩玩.   githu ...

  2. particles.js在vue上的运用

    转:https://www.jianshu.com/p/c52b3e91c94f 知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架 ...

  3. particles.js中文开发手册

    2017年6月17日01:06:28 因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个 官方github:https://github.com/Vin ...

  4. threejs和particles.js

    particles.js 在线配置的东西: http://vincentgarreau.com/particles.js/ https://threejs.org/ http://thehuub.co ...

  5. 使用particles.js实现网页背景粒子特效

    得知途径 B3log提供了两套博客系统,一个是用Java开发的,叫做Solo,我也是在网上搜索Java博客系统时发现了它,之后才了解了B3log:还有一个是用Go语言开发的,叫做Pipe.其中Solo ...

  6. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  7. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  8. particles.js 一个非常酷炫的粒子动画库

    GIT 地址:https://github.com/VincentGarreau/particles.js/ 效果:

  9. js开发环境配置

    使用Sublime Text3作为主要开发工具.下载地址:http://www.sublimetext.com/3. sublime拥有大量实用插件,使用插件需要先下载PackageControl以便 ...

随机推荐

  1. 转：C#清除回收站

    SHEmptyRecycleBin是一个内核API方法,该方法能够清空回收站中的文件,该方法在C#中需要手动的引入方法所在的类库.该方法在C#中的声明语法如下: [DllImportAttrbute( ...

  2. github开源的一些ip解析 ，运营商信息，经纬度 地址 后续开发使用

    https://github.com/wzhe06/ipdatabase  ip解析 https://github.com/flyaction/ipdatabase 比较新 https://githu ...

  3. Java 高级开发必修知识---内部类

    摘自:http://www.cnblogs.com/lsy131479/p/8798912.html Java 内部类分为: 1)成员内部类 2)静态嵌套类 3)方法内部类 4)匿名内部类 内部类的共 ...

  4. 每日linux命令学习-lsattr和chattr

    lsattr和chattr命令 1. lsattr命令 作用: 显示文件属性 语法: lsattr [-adlRvV][files...] 参数: -a 显示所有文件和目录(包括隐藏文件)的属性. - ...

  5. 您的windows许可证即将过期 win10的解决办法

    出现这个错误是因为安装的版本不是正版系统,每隔一段时间需要激活 这次激活也费了一些时间,记录如下希望能对大家有所帮助 (1)首先可以查看自己的许可什么什么时候会过期 windows+R调出命令运行窗口 ...

  6. P2473 [SCOI2008]奖励关（期望）

    P2473 [SCOI2008]奖励关 $n<=15$,显然的状压 设$f[i][w]$表示前$i$轮,状态$w$的最大期望 蓝后我们发现一个问题:$f[i][w]$可能是非法的 于是我们从$f ...

  7. ssh客户端连接报认证失败

    最近有个应用在并发导出的时候,报错了ssh认证失败,原来串行的时候都正常,经查,可能是ssh连接数不够的原因,这个问题刚好之前有个java开发反馈过,linux默认的ssh连接数为10个. 解决如下: ...

  8. Python3+Dlib实现简单人脸识别案例

    Python3+Dlib实现简单人脸识别案例 写在前边 很早很早之前,当我还是一个傻了吧唧的专科生的时候,我就听说过人脸识别,听说过算法,听说过人工智能,并且也出生牛犊不怕虎般的学习过TensorFl ...

  9. es数据迁移脚本(python)

    #!/usr/bin/python # -*- coding: UTF-8 -*- # 文件名:indiceCreate.py import sys import base64 import time ...

  10. 20145319 《网络渗透》免考—API拦截技术

    20145319 <网络渗透>免考-API拦截技术 概述 本次实验在window环境下进行,主要通过编写hook代码和注入程序,将我们的hook代码通过dll文件的形式注入到目标中,拦截其 ...