js实现粒子特效,particles.js的使用
今天偶然看到了一个比较炫酷的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" οnsubmit="return validateForm(this);" method="get">
User name:<input id="userName" name="userName" οnfοcus="delTagUserName();"/><span id="tagUserName"></span><br/><br/>
Pass word:<input id="passWord" name="passWord" οnfοcus="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)
转载于:https://www.cnblogs.com/liuyongbo/p/8068284.html
js实现粒子特效,particles.js的使用相关推荐
- 使用particles.js制造粒子特效
先上效果图: 使用particles.js2.0版本进行制作. 目录结构 index.html 为主页面,app.js为入口文件,particles.json 为配置文件. 具体配置请参考:GitHu ...
- 【Vue实用功能】Vue中实现粒子效果 particles.js
Vue中实现粒子效果 为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果 下载particles.j ...
- js粒子特效——particles
链接:https://pan.baidu.com/s/1KqsZ5I8Qjz_J7ysQtw8tMw 提取码:qy38 1.下载并引入particles.js 2.<div class=&q ...
- js烟雾粒子动态网页js特效
下载地址 js烟雾粒子动态网页特效,基于canvas实现的网页背景特效. dd:
- 酷炫背景粒子插件particles.js星空背景使用示例源码 - 附演示及下载地址
官方给的例子有点复杂,项目中一般就引一个 JS 文件然后调用好了,简单粗暴,网上很少有想要的效果,而且都没有源码,这里分享一个 文章目录 一.源码地址 二.实现效果 1. 电脑端 2. 手机端 三.源 ...
- 粒子动画 particles.js 在vue中的使用
1.安装particlesJS npm install --save particles.js 2.创建particles.json文件,设置particles的配置参数 {"particl ...
- js光斑粒子js特效代码
下载地址 js光斑粒子特效代码 dd:
- JS 炫酷特效敢超 Flash
千一网络收集的几十个超酷 JavaScript 特效,这些特效在网上有些也有发布,不过这个应该是最全的. JS 炫酷特效敢超 Flash-3D 特效演示 JS 炫酷特效敢超 Flash-阵列特效演示 ...
- vuejs粒子动画特效 npm安装插件vue-particles(particles.js) - 代码篇
文章目录 1. npm 安装插件`vue-particles` 2. 效果图: 3. 代码截图: 4. 代码示下: 5. 附件 · 文章阅读: 1. npm 安装插件vue-particles npm ...
最新文章
- EntityFrameworkCore 安装
- Xtrabackup备份、还原、恢复Mysql操作大全
- Win8/Win8.1常见错误代码的解决方法汇总
- JZOJ 5386. 【NOIP2017提高A组模拟9.23】碎
- 抽取随即人员——SqlServer_Proc_Random
- unity 下一帧执行_理解Unity中的优化(三):协程(Coroutines)
- 5G人才平均月薪水涨船高!通信研发工程师需求最旺
- 关于本博客数据仓库方面的原创文章汇总
- bzoj 1664: [Usaco2006 Open]County Fair Events 参加节日庆祝(DP)
- ANDROID AIDL 1
- Linux设备驱动——内核定时器
- webform 组合查询
- c语言词法分析器的实验报告,C语言词法分析器构造实验报告
- 信号、频谱、能量、功率、噪声
- 爬虫第七课:python爬取淘宝商品评论
- 小程序源码:装B神器P图修改微信流量主小程序源码下载趣味恶搞图制作
- celeste mod如何安装
- sent2vec教程
- 文件服务器 s3,AWS S3日志文件通过服务器上传到elk(示例代码)
- MySQL-数据操作-分组查询-连接查询-子查询-分页查询-联合查询
热门文章
- 推出全新的交互式导航和社交导航 iGibson 挑战
- Android+CS6:工业动画之变速变方向旋转齿轮
- 基于javaweb的蓝天幼儿园管理系统(java+springboot+thymeleaf+html+mysql)
- A Survey on Big Data Market: Pricing, Trading and Protection
- 520 钻石争霸赛 2021 7-8 浪漫侧影 (25 分)
- 大数据集群的部署安装
- 基于Android的手机音乐播放器的设计
- UP AI Core架起研扬和英特尔合作的桥梁
- 苹果x为什么总黑屏_苹果X突然黑屏重启怎么回事?教你强制重启方法
- C语言数字图像处理进阶---9 马赛克滤镜