今天偶然看到了一个比较炫酷的js网页。是粒子特效的,就试着用了用。一下是步骤,方便以后查看使用。

1.在网站下载源码https://github.com/VincentGarreau/particles.js

2.下载下来是一个压缩包,解压后有很多文件,最少需要app.js,particles.js,stats.js这三个文件才可以实现最基本功能

3.在把其中的index.html嵌入到自己的web项目中,并且替换其中的目录就可以了。

其中最重要的一点是,index.html中的<script>位置挪到div的前面,否则就不显示了,亲测!

<!-- particles.js container -->
<div id="particles-js">

</div>
<div id="login">
<form id="login" action="checkLogin.jsp" onsubmit="return validateForm(this);" method="get">
User&nbsp;name:<input id="userName" name="userName" onfocus="delTagUserName();"/><span id="tagUserName"></span><br/><br/>
Pass&nbsp;&nbsp;word:<input id="passWord" name="passWord" onfocus="delTagPassWord();"/><span id="tagPassWord"></span><br/>
<input type="submit" value="登陆"/>
</form>
</div>
<!-- scripts for particles这个不可以移动到前面去合并所有的script否则不会显示的-->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(2);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>

结果展示如下,当鼠标经过时会挤走立体三角形。(登陆表单没有设置样式,有点丑0.0)

js实现粒子特效,particles.js的使用的更多相关文章

  1. vue.js 实现粒子特效之插件( vue-particles )

    首先先一张效果图 图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动. 使用教程: npm install vue-particles --s ...

  2. particles.js在vue上的运用

    转:https://www.jianshu.com/p/c52b3e91c94f 知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架 ...

  3. particles.js使用及配置

    particles.js使用及配置 参考:http://blog.csdn.net/csdn_yudong/article/details/53128570 这个项目中有提供demo,可以直接下载这个 ...

  4. 使用particles.js实现网页背景粒子特效

    得知途径 B3log提供了两套博客系统,一个是用Java开发的,叫做Solo,我也是在网上搜索Java博客系统时发现了它,之后才了解了B3log:还有一个是用Go语言开发的,叫做Pipe.其中Solo ...

  5. 基于three.js实现特定Div容器的粒子特效封装

    本文基于three.js实现特定容器的粒子特效效果,支持用户传入特定的dom对象以及粒子颜色. 效果图 移入库 <script src="jquery-1.11.3.min.js&qu ...

  6. 弄个知乎的粒子动态背景_实践particles.js

    好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图:   感觉有比格,就照着弄了一个,玩玩.   githu ...

  7. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  8. Three.js粒子特效,shader渲染初探(一篇非常详细的介绍)

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  9. particles.js 一个非常酷炫的粒子动画库

    GIT 地址:https://github.com/VincentGarreau/particles.js/ 效果:

随机推荐

  1. Java 中 Gson的使用

    JSON 是一种文本形式的数据交换格式,它比XML更轻量.比二进制容易阅读和编写,调式也更加方便;解析和生成的方式很多,Java中最常用的类库有:JSON-Java.Gson.Jackson.Fast ...

  2. Spring MVC 之 请求url 带后缀的情况

    RequestMappingInfoHandlerMapping 在处理http请求的时候, 如果 请求url 有后缀,如果找不到精确匹配的那个@RequestMapping方法.那么,就把后缀去掉, ...

  3. 【Noip模拟 20161005】运货

    问题描述 小ww开了一家快递公司,在nn个城市之间进行货物运输工作,一共雇了mm个快递员. 每个快递员性格很奇特,第ii号快递员只愿意将货物从城市sisi运送到titi(甚至不愿意将货物 从titi运 ...

  4. (转)在T-SQL语句中访问远程数据库

    https://www.cnblogs.com/lgx5/p/7821887.html 1.启用Ad Hoc Distributed Queries 在使用openrowset/opendatasou ...

  5. 基于maven javaweb编程缺少java源文件

    前提:基于maven的javaweb的开发环境,可参考 link 一. https://blog.csdn.net/ldlly0505/article/details/79674826 1.在sour ...

  6. 反射与特性与Tool编写

    大多数程序都是用来处理数据的,他们读,写,操作和显示数据,图形也是一种数据. 程序员为某种目的创建和使用一些类型,因此,在设计时必须理解所使用类型的特性. 有关程序及其类型的数据被称为元数据,他们保存 ...

  7. autoperfixer 版本配置

    { "private": true, "dependencies": { "autoprefixer": "^9.3.1" ...

  8. ES6 let const 声明变量 块级作用域

    ES6 中除了使用 var 定义变量,还有let.const,定义变量. function getValue(condition){ console.log(typeof value2); // un ...

  9. 做u盘启动重装系统 进winPE 出现 cdboot:couldn't find ntldr 解决办法

    公司的QA本来用的ubuntu系统 觉得不是很好使 就找我重装win10系统  之前有重装过系统 就信心满满的答应了 我拿出U盘 把U盘格式化了下 去下载了个雨林木风的win10 系统(ISO文件) ...

  10. poj 1639 最小k度限制生成树

    题目链接:https://vjudge.net/problem 题意: 给各位看一下题意,算法详解看下面大佬博客吧,写的很好. 参考博客:最小k度限制生成树 - chty - 博客园  https:/ ...