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. Web3.js API 中文文档

    Web3.js API 中文文档 http://web3.tryblockchain.org/Web3.js-api-refrence.html web3对象提供了所有方法. 示例: //初始化过程 ...

  2. EditPlus配置Java

    --Java Compile-- 命令:D:\Program Files\Java\jdk1.7.0_79\bin\javac.exe 参数:$(FileName) 初始目录:$(FileDir) 动 ...

  3. eval & sleep

    ltp-ddt can_loopback source 'functions.sh'; interface='can0'; bitrate=; do_cmd "do_can_loopback ...

  4. JavaScript笔记 #05# 用Regex辅助生成文章目录

    PS. 用来生成个人笔记的目录 1.输入:html文本 <h2>Notes</h2> <p>1.小标题1.正文正文正文</p> <div clas ...

  5. 深入理解Word2Vec

    Word2Vec Tutorial - The Skip-Gram Model,Skip-Gram模型的实现原理:http://mccormickml.com/2016/04/19/word2vec- ...

  6. flask模板，路由,消息提示，异常处理

    1.flask的路由与反向路由 from flask import Flask, request, url_for app = Flask(__name__) @app.route('/') def ...

  7. CRC、MD5和SHA1的区别？

    什么是CRC校验?CRC即循环冗余校验码:是数据通信领域中最常用的一种查错校验码,其特征是信息字段和校验字段的长度可以任意选定.循环冗余检查(CRC)是一种数据传输检错功能,对数据进行多项式计算,并将 ...

  8. listen()函数中backlog参数分析

    实例分析1 将服务器端的listen函数backlog设置为2,用20个客户端与服务器建立连接,查看连接的建立情况. 服务器代码: #include <stdio.h> #include& ...

  9. suse日常操作(含suse/rhel内核与发行版对应关系)

    最近有家客户要求只能使用suse系统,是suse 12 sp3的,而且版本都不同意换,一直以来,都是使用rhel的客户,还没遇到过suse的,可偏偏不巧,我们的系统和suse 12 sp3自带的gli ...

  10. linux下安装与部署redis

    一.Redis介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多 ...