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. 通用技术 mysql 亿级数据优化

    通用技术 mysql 亿级数据优化 一定要正确设计索引 一定要避免SQL语句全表扫描,所以SQL一定要走索引(如:一切的 > < != 等等之类的写法都会导致全表扫描) 一定要避免 lim ...

  2. httpclient get post

    https://www.cnblogs.com/wutongin/p/7778996.html post请求方法和get请求方法 package com.xkeshi.paymentweb.contr ...

  3. linux 开始

    3306 -- mysql 8000--django默认 服务由端口控制 https -- 443 http -- 80 linux发行版:1.centos 免费版的redhat2.ubuntu 乌版 ...

  4. redis 五大数据类型以及操作

    一.redis的两种链接方式 1.简单连接 import redis conn = redis.Redis(host='10.0.0.200',port=6379) conn.set('k1','年后 ...

  5. Mysql初级第一天(wangyun)

    SQL Structure Query Language 结构化查询语言 数据库DataBase 产品: 1:小型数据库 Ms Acssess (Office) SQLite 移动设备 2:中型数据库 ...

  6. react复习总结（2）--react生命周期和组件通信

    这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...

  7. mybatis之关联映射

    ###mybatis使用之一对一关联映射 1)分析并画ER图.(特别是一对一.一对多.多对多的情况) 2)启动终端数据库,并建库建表,在表中插入值和字段,并查看结果.(后期把navicat用上) 3) ...

  8. python selenium chrome有界面与无界面模式

    from selenium.webdriver.chrome.options import Options from selenium import webdriver # 无界面模式 def Chr ...

  9. 汇编语言教材assembly language

    https://en.wikipedia.org/wiki/Assembly_language https://baike.baidu.com/item/%E6%B1%87%E7%BC%96%E8%A ...

  10. 【题解】Luogu P2147 [SDOI2008]洞穴勘测

    原题传送门 这题用Link-Cut-Tree解决,Link-Cut-Tree详解 我不太会踩爆Link-Cut-Tree的并查集做法qaq 我们用Link-Cut-Tree维护连通性(十分无脑) Co ...