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. 关于js闭包之小问题大错误

    闭包是 JavaScript 开发的一个关键方面:匿名函数可以访问父级作用域的变量. 如果闭包的作用域中保存着一个 HTML 元素,则该元素无法被销毁.(下面代码来自高程) 刚看到一个关于闭包自己没注 ...

  2. MyEclipse 10.7（版本：eclipse 3.7.x-Indigo系列）安装PyDev 4.5.4插件

    解压安装路径结构如截图所示: 安装后重启:

  3. Jquery autocomplete.js输入框联想补全功能

    Jquery autocomplete.js插件下载地址:http://files.cnblogs.com/files/jinzhiming/autocomplete.rar 有两种用法,一种是直接使 ...

  4. laravel 数据库 - 增删查改

    //查询public function select(){ /** 数据表 CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, ...

  5. django 模型类的常见字段约束，以及filter 过滤和查询

    null 不设置时默认设置为False.设置为True时,数据库表字段中将存入NULL的记录. null和blank组合使用,null=True,blank=True,表示该字段可以为空 blank ...

  6. 一个简单的购物金额结算（JAVA）

    我编写的代码: import java.util.Scanner; public class ZuoYe01 { public static void main(String[] args) { // ...

  7. vfio

    VFIO简介 Documentation/vfio.txt 还是不理解IOMMU.北桥.PCI的MMIO和ioremap file:///C:/Users/shaohefe/Downloads/vt- ...

  8. LVS+Keepalived+Mysql+主主数据库架构[2台]

    架构图 安装步骤省略. 158.140 keepalived.conf ! Configuration File for keepalived global_defs { #全局标识模块 notifi ...

  9. libopencv_shape.so.3.0: cannot open shared object file: No such file or directory 解决笔记

    进入目录:/etc/ld.so.conf.d 创建:opencv.conf 添加:/opt/opencv-3.0.0/build/lib 执行:ldconfig DETAIL: (1)ldd dlsd ...

  10. Lucas定理学习笔记

    从这里开始 一个有趣的问题 扩展Lucas算法 一个有趣的问题 题目大意 给定$n, m, p$,求$C_{n}^{m}$除以$p$后的余数. Subtask#1  $0\leqslant m\leq ...