JS库之ParticlesJS使用简介

2024-12-03 16:56:11

particles.js

A lightweight JavaScript library for creating particles.

一个轻量级的创建粒子背景的 JavaScript 库

我们先来看一下效果图：

标准版：

星空版：

泡泡版：

下雪版：

利用这个我们可以做些什么呢？

我觉得这个比较适合用在无背景的页面，或者说找不到合适的图片来做背景，那么，我们都可以使用这个。

比如说：

或者

嗯，效果都挺不错的。

那么，下面将介绍如何使用 particles.js 。

particlesJS 开源在Github上：https://github.com/VincentGarreau/particles.js

这个项目中有提供demo，可以直接下载这个项目，打开demo里面的index.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" rel="external nofollow" >
</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中设置的。

基于这个模板，我们可以在上面添加我们想要实现的功能，比如说注册登录功能，需要注意的是：
用 div 来封装我们要实现的功能代码块，并且在 css 中为这个 div 设置绝对定位。

下面介绍参数配置文件 app.js 文件的使用：

particles.number.value ：粒子的数量

particles.number.density ：粒子的稀密程度

particles.number.density.enable ：启用粒子的稀密程度（true 或 false）

particles.number.density.value_area ：每一个粒子占据的空间（启用粒子密度，才可用）

particles.color.value ：粒子的颜色（支持16进制”#b61924”，rgb”{r:182, g:25, b:36}”，hsl，以及random）

particles.shape.type：粒子的形状（”circle” “edge” “triangle” “polygon” “star” “image”）

particles.opacity.value：粒子的透明度

particles.size.anim.enable：是否启用粒子速度（true/false）

particles.size.anim.speed：粒子动画频率

particles.size.anim.sync：粒子运行速度与动画是否同步

particles.move.speed：粒子移动速度

大家可以根据这些配置文件，配置自己喜欢的背景出来，下面提供两份完整配置文件 app.js。

配置文件一（经典背景）：

{
 "particles": {
 "number": {
  "value": 80,
  "density": {
  "enable": true,
  "value_area": 800
  }
 },
 "color": {
  "value": "#ffffff"
 },
 "shape": {
  "type": "polygon",
  "stroke": {
  "width": 0,
  "color": "#000000"
  },
  "polygon": {
  "nb_sides": 5
  },
  "image": {
  "src": "img/github.svg",
  "width": 100,
  "height": 100
  }
 },
 "opacity": {
  "value": 0.5,
  "random": false,
  "anim": {
  "enable": false,
  "speed": 1,
  "opacity_min": 0.1,
  "sync": false
  }
 },
 "size": {
  "value": 3,
  "random": true,
  "anim": {
  "enable": false,
  "speed": 40,
  "size_min": 0.1,
  "sync": false
  }
 },
 "line_linked": {
  "enable": true,
  "distance": 150,
  "color": "#ffffff",
  "opacity": 0.4,
  "width": 1
 },
 "move": {
  "enable": true,
  "speed": 6,
  "direction": "none",
  "random": false,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "attract": {
  "enable": false,
  "rotateX": 600,
  "rotateY": 1200
  }
 }
 },
 "interactivity": {
 "detect_on": "canvas",
 "events": {
  "onhover": {
  "enable": true,
  "mode": "repulse"
  },
  "onclick": {
  "enable": true,
  "mode": "push"
  },
  "resize": true
 },
 "modes": {
  "grab": {
  "distance": 400,
  "line_linked": {
   "opacity": 1
  }
  },
  "bubble": {
  "distance": 400,
  "size": 40,
  "duration": 2,
  "opacity": 8,
  "speed": 3
  },
  "repulse": {
  "distance": 200,
  "duration": 0.4
  },
  "push": {
  "particles_nb": 4
  },
  "remove": {
  "particles_nb": 2
  }
 }
 },
 "retina_detect": false
}

配置文件二（星空背景）：

{
 "particles": {
 "number": {
  "value": 160,
  "density": {
  "enable": true,
  "value_area": 800
  }
 },
 "color": {
  "value": "#ffffff"
 },
 "shape": {
  "type": "circle",
  "stroke": {
  "width": 0,
  "color": "#000000"
  },
  "polygon": {
  "nb_sides": 5
  },
  "image": {
  "src": "img/github.svg",
  "width": 100,
  "height": 100
  }
 },
 "opacity": {
  "value": 1,
  "random": true,
  "anim": {
  "enable": true,
  "speed": 1,
  "opacity_min": 0,
  "sync": false
  }
 },
 "size": {
  "value": 3,
  "random": true,
  "anim": {
  "enable": false,
  "speed": 4,
  "size_min": 0.3,
  "sync": false
  }
 },
 "line_linked": {
  "enable": false,
  "distance": 150,
  "color": "#ffffff",
  "opacity": 0.4,
  "width": 1
 },
 "move": {
  "enable": true,
  "speed": 1,
  "direction": "none",
  "random": true,
  "straight": false,
  "out_mode": "out",
  "bounce": false,
  "attract": {
  "enable": false,
  "rotateX": 600,
  "rotateY": 600
  }
 }
 },
 "interactivity": {
 "detect_on": "canvas",
 "events": {
  "onhover": {
  "enable": true,
  "mode": "bubble"
  },
  "onclick": {
  "enable": true,
  "mode": "repulse"
  },
  "resize": true
 },
 "modes": {
  "grab": {
  "distance": 400,
  "line_linked": {
   "opacity": 1
  }
  },
  "bubble": {
  "distance": 250,
  "size": 0,
  "duration": 2,
  "opacity": 0,
  "speed": 3
  },
  "repulse": {
  "distance": 400,
  "duration": 0.4
  },
  "push": {
  "particles_nb": 4
  },
  "remove": {
  "particles_nb": 2
  }
 }
 },
 "retina_detect": true
}

总结

以上所述是小编给大家介绍的ParticlesJS使用简介，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

JS库之Three.js 简易入门教程(详解之一)

开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章
JS库中的Particles.js在vue上的运用案例分析

知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架的,两个凑在一起学了. 讲道理,这个用得好的话,页面是可以很酷的,譬如我现在写的项目酷酷的登录页嘻嘻~ 安装particles.js npm install --save particles.js 配置particles.js 1.data 这个data是用于控制粒子在页面中所呈现的状态. { "particles": { "number": {
JS库之Waypoints的用法详解

一款用于捕获各种滚动事件的插件?Waypoints.同时Waypoints还支持固定元素和无限滚动的功能,功力十分强大. 一.最简易的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waypoints的最简单使用</title>  <style>
JS库particles.js创建超炫背景粒子插件(附源码下载)

插件描述:particles.js用于创建粒子的轻量级 JavaScript 库. 查看效果源码下载使用加载 particles.js和配置粒子 <div id="particles-js"></div> <script src="particles.js"></script> app.js /* particlesJS.load(@dom-id, @path-json, @callba
JS库之Particles.js中文开发手册及参数详解

因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个官方github:https://github.com/VincentGarreau/particles.js/ demo制作器,注意可能需要FQ https://codepen.io/VincentGarreau/pen/pnlso 这个可以把你制作的demo导出 http://vincentgarreau.com/particles.js/这个可以用来尝试配置不同效果使用方法加载parti
JS库之ParticlesJS使用简介

particles.js A lightweight JavaScript library for creating particles. 一个轻量级的创建粒子背景的 JavaScript 库我们先来看一下效果图: 标准版: 星空版: 泡泡版: 下雪版: 利用这个我们可以做些什么呢? 我觉得这个比较适合用在无背景的页面,或者说找不到合适的图片来做背景,那么,我们都可以使用这个. 比如说: 或者嗯,效果都挺不错的. 那么,下面将介绍如何使用 particles.js . particlesJS
交互式可视化js库gojs使用介绍及技巧

目录 1. gojs 简介 2. gojs 应用场景 3. 为什么选用 gojs: 4. gojs 上手指南 5. 小技巧(非常实用哦) 6. 实践:实现节点分组关系可视化交互图最后 1. gojs 简介 gojs 是一个用于构建交互式可视化图的 js 库,使用可自定义的模板和布局构建复杂节点.链接和组,从而构建出简单到复杂的各类图,如流程图.脑图.组织图.甘特图等.而且提供了许多用于用户交互的高级功能,例如拖放.复制和粘贴.就地文本编辑...... gojs 是 Northwoods Sof
Handtrack.js库实现实时监测手部运动(推荐)

[导语]: Handtrack.js 是一个可以直接在浏览器中实现实时手部动作跟踪和检测的原型库,它是经过 Tensorflow 训练产生的开源模型,不需要用户自己训练.有了它,你只需要通过几行代码就能检测图片中手部的动作. GitHub 主页 https://github.com/victordibi... 1.简介 Handtrack.js ,是基于 TensorFlow 对象检测 API 训练模型搭建的,能够实现通过摄像头实时监测手部运动,它的特点主要包含: handtrack.js 2.
js库Modernizr的介绍和使用

传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况. Modernizr 并非试图添加老版本浏览器不支持的功能,而是令你通过创建可选风格配置修改页面设计. 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能. 什么是Modernizr? Modernizr是一个开源的JS库,它使得那些基
jQuery多个版本和其他js库冲突的解决方法

jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery测试页</title> </head>
日期处理的js库（迷你版）--自建js库总结

接口+继承+代码优化思想先分享下我觉得一个很不错的js编程小技巧,达到很大的代码共用性! 因为很多js库会在原生的对象上进行直接原型扩展,但这是很不好的习惯,不仅加重了每个新实例对象的内存消耗,而且容易造成污染性误解(以为有这东西)!而这也是建js库一个准则:尽量少的原型扩展,特别是越根部的对象! js建库准则 js建库准则(Dean Edwards在开发base2时候的一些体会)翻译版:http://biaoge.me/2009/12/239 js建库学习好地方:http://ejohn.o

JS库之ParticlesJS使用简介

相关推荐

随机推荐