JS库中的Particles.js在vue上的运用案例分析

知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的。刚好目前的项目是利用vue框架的,两个凑在一起学了。

讲道理,这个用得好的话,页面是可以很酷的,譬如我现在写的项目

酷酷的登录页

嘻嘻~

安装particles.js

npm install --save particles.js

配置particles.js

1.data

这个data是用于控制粒子在页面中所呈现的状态。

{
"particles": {
 "number": {
 "value": 60,
 "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": 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": 4,
 "direction": "none",
 "random": false,
 "straight": false,
 "out_mode": "out",
 "bounce": false,
 "attract": {
  "enable": false,
  "rotateX": 100,
  "rotateY": 1200
 }
 }
},
"interactivity": {
 "detect_on": "Window",
 "events": {
 "onhover": {
  "enable": true,
  "mode": "grab"
 },
 "onclick": {
  "enable": true,
  "mode": "push"
 },
 "resize": true
 },
 "modes": {
 "grab": {
  "distance": 140,
  "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": true
}

2.template

这个就是动态粒子要展示的位置。

<div id="particles"></div>

3.script

因为涉及到dom树,所以必须在挂载结束后初始化particles.js。第一个参数id就是你在template上取得id名,像我要写的话就是particles。第二个参数是你的data存放的路径,个人建议使用相对路径。

mounted(){
 particlesJS.load('id','path to your particles.data');
}

4.style

#particles{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

讲到这里会发现,还有一个最重要的点没讲出来,恩,就是particles.js 的引入。当你的使用范围比较小时,可以直接在当前vue文件的script中引入,即

//vue文件
import particles from 'particles.js'

又或者你觉得这样不好管理,一定要放在main文件中也可以

//main文件
import particles from 'particles.js'
Vue.use(particles)

最后呈现的效果如下

总结

以上所述是小编给大家介绍的JS库中的Particles.js在vue上的运用案例分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-09-11

JS库之ParticlesJS使用简介

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

JS库之Waypoints的用法详解

一款用于捕获各种滚动事件的插件?Waypoints.同时Waypoints还支持固定元素和无限滚动的功能,功力十分强大. 一.最简易的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waypoints的最简单使用</title> <!-- 定义css样式 --> <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库之Three.js 简易入门教程(详解之一)

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

Node.js+Express配置入门教程详解

Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型

ABP(现代ASP.NET样板开发框架)系列之二、ABP入门教程详解

ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate ABP 的由来 "DRY--避免重复

Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc

BootStrop前端框架入门教程详解

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap提供了三种类型的下载: -----------------------------------------------

网络抓包工具wireshark入门教程详解

Wireshark(前称Ethereal)是一个网络数据包分析软件.网络数据包分析软件的功能是截取网络数据包,并尽可能显示出最为详细的网络数据包数据. Wireshark使用WinPCAP作为接口,直接与网卡进行数据报文交换. 网络管理员使用Wireshark来检测网络问题,网络安全工程师使用Wireshark来检查资讯安全相关问题,开发者使用Wireshark来为新的通讯协定除错,普通使用者使用Wireshark来学习网络协定的相关知识. 当然,有的人也会"居心叵测"的用它来寻找一些

前端Electron新手入门教程详解

Electron 是什么 定义 Electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架.这里所说的桌面应用指的是在Windows.OSX及Linux系统上运行的程序. 历史 2013年的时候,Atom编辑器问世,作为实现它的底层框架Electron也逐渐被熟知,到2014年时被开源,那时它还是叫Atom Shell. 接下来的几年,Electron在不断的更新迭代,几乎每年都有一个重大的里程碑 2013年4月11日,

Scala入门教程详解

Scala简介 Scala(Scala Language的简称)语言是一种能够运行于JVM和.Net平台之上的通用编程语言,既可用于大规模应用程序开发,也可用于脚本编程,它由由Martin Odersk于2001开发,2004年开始程序运行在JVM与.Net平台之上,由于其简洁.优雅.类型安全的编程模式而受到关注. Scala语言具有如下特点: 1 纯面向对象编程语言 (1) Encapsulation/information hiding. (2)Inheritance. (3)Polymor

Centos7安装ElasticSearch 6.4.1入门教程详解

1.下载ElasticSearch 6.4.1安装包 下载地址: https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.4.1.tar.gz 2.解压压缩包 [root@localhost ElasticSearch]# tar -zxvf elasticsearch-6.4.1.tar.gz 3.启动ElasticSearch [root@localhost bin]# ./elasticsearch 以后台方

dubbo整合springboot新手入门教程详解

前言 目前互联网公司,大部分项目都是基于分布式,一个项目被拆分成几个小项目,这些小项目会分别部署在不同的计算机上面,这个叫做微服务.当一台计算机的程序需要调用另一台计算机代码的时候,就涉及远程调用.此时dubbo就粉末登场了. 搭建工程 idea新建工程后,删除src文件夹,然后在gradle文件中输入 buildscript { repositories { maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }