基于Particles.js制作超炫粒子动态背景效果(仿知乎)

好久没登录知乎，发现他们的登录页面粒子动态效果蛮炫的，查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果。

上图

上图:

感觉有比格，就照着弄了一个,玩玩。

github: https://github.com/VincentGarreau/particles.js/

操作过程：

网上有基本流程，可以参考一下，不过直接用在登录页面 会有小bug，需要调整下。

1、首先在页面中引入particles.js文件。

<script src="js/particles.js"></script>

2、在页面中使用一个div来作为放置粒子的容器。[一般放最底部，css 需要改进一下]

<div id="particles"></div>
<style type="text/css">
 #particles {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; //这个z-index 要是不设置 会对登录表单的点击产生干扰，会去抢风头，不好好做一个安静的背景。
  background-color: #26AFE3;
 }
</style>

3、加载配置文件:  网上讲 用load()方法 还得弄个配置的json文件，光路径 就搞残了我。

参考官方demo  http://codepen.io/VincentGarreau/pen/pnlso

直接在js里面写配置

<script type="text/javascript">
// particlesJS.load('particles', './js/app/particles.json', function() {
//  console.log('callback - particles.js config loaded');
// });
particlesJS("particles", {
 "particles": {
  "number": {
   "value": 30,
   "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": 10,
   "random": true,
   "anim": {
    "enable": false,
    "speed": 50,
    "size_min": 0.1,
    "sync": false
   }
  },
  "line_linked": {
   "enable": true,
   "distance": 300,
   "color": "#ffffff",
   "opacity": 0.4,
   "width": 2
  },
  "move": {
   "enable": true,
   "speed": 8,
   "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": false,
    "mode": "repulse"
   },
   "onclick": {
    "enable": false,
    "mode": "push"
   },
   "resize": true
  },
  "modes": {
   "grab": {
    "distance": 800,
    "line_linked": {
     "opacity": 1
    }
   },
   "bubble": {
    "distance": 800,
    "size": 80,
    "duration": 2,
    "opacity": 0.8,
    "speed": 3
   },
   "repulse": {
    "distance": 400,
    "duration": 0.4
   },
   "push": {
    "particles_nb": 4
   },
   "remove": {
    "particles_nb": 2
   }
  }
 },
 "retina_detect": true
});
</script>

4，配置参数 option 以及使用：  option  github 官网页面就有详情。控制粒子数量 运动速度 什么的

particles 用起来还是有点问题的，在chrome 下载文件后再切换到这个页面 就残废了。等解决方法。

总结

以上所述是小编给大家介绍的基于Particles.js制作超炫粒子动态背景效果(仿知乎)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 如何在 Vue.js 中使用第三方js库

    在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦. 本文将介绍一些在 Vue.js 中使用第三方库的方式. 全局变量 在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到

  • JavaScript的Vue.js库入门学习教程

    JavaScript的Vue.js库入门学习教程

    Vue是一个小巧轻便的javascript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 这篇教程的目的就是通过一些例子,让你能够概览一些基本的概念和特性.在接下来的其他教程里,你会学到Vue更多的有用的特性,从而用Vue搭建一个可扩展的项目. MVVM 数据绑定 MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新.Vue.js在数据绑定的API设计上借鉴了Angula

  • JS库之ParticlesJS使用简介

    JS库之ParticlesJS使用简介

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

  • JS库之Particles.js中文开发手册及参数详解

    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

  • 关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 1.应用级的状态集中放在 store 中. 2.改变状态的唯一方式是提交mutations,这是个同步的事务. 3.异步逻辑应该封装在action 中. 只要你遵循这些规则,怎么构建你的项目的结构就取决于你了.如果你的 store 文件非常大,仅仅拆分成 action.mutation 和 getter 多个文件即可. 对于稍微复杂点的应用,我们可能都需要用到模块.下面是一个简单的项目架构:

  • JavaScript的MVVM库Vue.js入门学习笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写

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

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

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

  • 基于Particles.js制作超炫粒子动态背景效果(仿知乎)

    基于Particles.js制作超炫粒子动态背景效果(仿知乎)

    好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图: 感觉有比格,就照着弄了一个,玩玩. github: https://github.com/VincentGarreau/particles.js/ 操作过程: 网上有基本流程,可以参考一下,不过直接用在登录页面 会有小bug,需要调整下. 1.首先在页面中引入particles.js文件. <script src="js/particles.js

  • JS库particles.js创建超炫背景粒子插件(附源码下载)

    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

  • 基于node.js制作简单爬虫教程

    基于node.js制作简单爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishujia.com/webapp/build/html/ 网站的所有门店发型师的基本信息. 思路:访问上述网站,通过chrome浏览器的network对网页内容分析,找到获取各个门店发型师的接口,对参数及返回数据进行分析,遍历所有门店的所有发型师,直到遍历完毕,同事将信息存储到本地. 步骤一:安装nod

  • JS实现超炫网页烟花动画效果的方法

    本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • python绘制超炫酷动态Julia集示例

    python绘制超炫酷动态Julia集示例

    目录 前言 Mandelbrot集 无限缩放 Julia集 前言 此Julia非彼Julia,指的是对于某复数 c c c,使得迭代式 f ( z ) = z 2 + c f(z)=z^2+c f(z)=z2+c收敛的复数 z z z的集合.例如,当 c = 0 c=0 c=0时,那么其收敛区间为 z 2 < 1 z^2<1 z2<1的单位圆,对应的 c c c的Julia集便是 cos ⁡ θ + i sin ⁡ θ \cos\theta+i\sin\theta cosθ+isinθ.

  • 基于Three.js制作一个3D中国地图

    基于Three.js制作一个3D中国地图

    目录 1.使用geoJson绘制3d地图 1.1 创建场景相关 1.2 根据json绘制地图 2.增加光照 3.增加阴影模糊 4.增加鼠标事件 5.渲染 6.动画效果 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封装成类 1.使用geoJson绘制3d地图 1.1 创建场景相关 // 创建webGL渲染器 this.renderer = new THREE.WebGLRenderer( { antiali

  • 基于three.js实现的3D粒子动效实例代码

    基于three.js实现的3D粒子动效实例代码

    一.背景 粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单个的运动,模拟出现真实的效果.three.js是用JavaScript编写的WebGL的第三方库,three.js提供了丰富的API帮助我们去实现3D动效,本文主要介绍如何使用three.js实现粒子过渡效果,以及基本的鼠标交互操作. (注:本文使用的关于three.js的API都是基于版本r98的.) 二.实现步骤 1. 创建渲染场景

  • vue3中使用VueParticles实现粒子动态背景效果

    vue3中使用VueParticles实现粒子动态背景效果

    目录 particles.vue3官网 可以仔细看下这里 有案例跟文档 官网 Demo 好了直接进入主题 安装使用 Vue3 语法糖中使用 配置单独写到文件particles.js,代码看起来简洁些 - 在某项目见到粒子动画背景,也想将这个动画效果用在自己的项目上. 先看效果 实际是动图的. 还不太会搞动图 凑合看下 particles.vue3官网 particles.js.org/ 可以仔细看下这里 有案例跟文档 官网 Demo 好了直接进入主题 安装使用 npm install parti

  • 基于jquery和svg实现超炫酷的动画特效

    基于jquery和svg实现超炫酷的动画特效

    今天给大家分享一款基于jquery和svg超炫的网页动画.这款动画效果非常炫.下面还有重播.慢速.和反向动画按钮.效果非常漂亮.一起看下效果图: 实现的代码. html代码: 复制代码 代码如下: <div id="intro">         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"          

  • 基于Python Dash库制作酷炫的可视化大屏

    基于Python Dash库制作酷炫的可视化大屏

    目录 介绍 数据 大屏搭建 介绍 大家好,我是小F- 在数据时代,我们每个人既是数据的生产者,也是数据的使用者,然而初次获取和存储的原始数据杂乱无章.信息冗余.价值较低. 要想数据达到生动有趣.让人一目了然.豁然开朗的效果,就需要借助数据可视化. 以前给大家介绍过使用Streamlit库制作大屏,今天给大家带来一个新方法. 通过Python的Dash库,来制作一个酷炫的可视化大屏! 先来看一下整体效果,好像还不错哦. 主要使用Python的Dash库.Plotly库.Requests库. 其中R

随机推荐