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. 英文名为什么最好不用joe？JOE英文名的寓意是什么？

    英文名为什么最好不用joe?JOE英文名的寓意是什么? Joe 的意思是乔,人名.意为,上帝还会赐予 Joe 乔(男子名, 对不相识者非正式的称呼; Joseph的昵称)(=GIJoe)[美俚]美国兵 ...

  2. 关于setInterval的坑

    一道面试题:“setInterval和setTimeout有什么区别” “如果setInterval计时器的回调函数执行完需要5秒,而计时器时间间隔为3秒,那会发生什么?” 验证代码 让程序滞留固定时 ...

  3. The Little Prince-12/01

    The Little Prince-12/01 The people have no imagination. They repeat whatever one says to them… On my ...

  4. Mysql高级第一天(laojia)

    select char_length('我们love'); select *, char_length(sname) '姓名字数' from tbl_student; select '对方' + '5 ...

  5. QRegExp 正则表达式详解

    引言 正则表达式(regular expression)就是用一个“字符串”来描述一个特征,然后去验证另一个“字符串”是否符合这个特征.比如 表达式“ab+” 描述的特征是“一个 'a' 和 任意个 ...

  6. 4~20mA

    4~20mA电流输出芯片XTR111完整电路 0-5v转0-20ma和0-5v转4-20ma 压控恒流源电路 4-20mA电流环路发送器入门

  7. The logback manual #03# Configuration

    索引 Configuration in logback Automatically configuring logback Automatic configuration with logback-t ...

  8. 忘记MySQL root密码，如何不重启修改

    说个前提:mysqld可以处理kill命令发送的信号,如SIGHUP.SIGTERM,SIGHUP信号产生的行为类似于flush命令. 不重启找回root密码首先需要有个较低权限的账号,比如可以修改t ...

  9. Linux学习笔记之Linux 让进程在后台可靠运行的几种方法

    0x00 概述 我们经常会碰到这样的问题,用 telnet/ssh 登录了远程的 Linux 服务器,运行了一些耗时较长的任务, 结果却由于网络的不稳定导致任务中途失败.如何让命令提交后不受本地关闭终 ...

  10. python类的组合

    类的组合,即在类实例化时,将另一个类的实例作为参数传入,这样可以将两个实例关联起来. 当类之间有显著不同,并且较小的类是较大的类所需要的组件时,用组合比较好. 例如,描述一个机器人类,这个大类是由很多 ...