particlesjs
今天发现一个粒子动画的插件下个笔记做个备用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style>
#page1 {
background: url(images/mask.png) left center no-repeat;
height: 750px;
padding-top: 87px;
background-size: cover;
/* Retina display */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
background-image: url(images/mask@2x.png);
background-size: 1440px 750px;
}
}
.topside {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.graphics {
position: relative;
top: 0;
// background: url(images/graphics.png) 22px center no-repeat;
// background-size: cover;
height: 400px;
/* Retina display */
// @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
// background-image: url(images/graphics@2x.png);
// background-size: 1189px 427px;
// }
}
</style>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/swiper.min.js"></script>
</head>
<body> <div class="page" id="page1">
<div class="topside"> <div class="graphics" id="particles-js"></div>
</div>
</div>
</body>
</html>
<script>
$(function(){ //粒子动画
particlesJS('particles-js', {
particles: {
color: '#fff',
shape: 'circle', // "circle", "edge" or "triangle"
opacity: 1,
size: 4,
size_random: true,
nb: 150,
line_linked: {
enable_auto: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1,
condensed_mode: {
enable: false,
rotateX: 600,
rotateY: 600
}
},
anim: {
enable: true,
speed: 1
}
},
interactivity: {
enable: true,
mouse: {
distance: 300
},
detect_on: 'canvas', // "canvas" or "window"
mode: 'grab',
line_linked: {
opacity: .5
},
events: {
onclick: {
enable: true,
mode: 'push', // "push" or "remove"
nb: 4
}
}
},
/* Retina Display Support */
retina_detect: true
});
});
</script>
particlesjs的更多相关文章
- 在网页中使用particlesjs实现背景的动态粒子特效
先上一张效果图: 这种动态的背景特效,制作起来其实非常简单. 使用了particles.js particles.js可以从github网站下载到最新的源码,网址是 https://github.co ...
- 引入插件的时候 提示particlesJS is not defined
particlesJS is not defined 插件或者js文件在引入时需要注意引入顺序,每次都找很久的错误 一般引入min.js就可以,min.js意思就是压缩的js文件 引入时应该先加入 ...
- particlesJS is not defined
插件或者js文件在引入时需要注意引入顺序,每次都找很久的错误 一般引入min.js就可以,min.js意思就是压缩的js文件 引入时应该先加入min类的文件在引入配置文件 比如particles插件, ...
- 弄个知乎的粒子动态背景_实践particles.js
好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图: 感觉有比格,就照着弄了一个,玩玩. githu ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 【Java EE】从零开始写项目【总结】
从零开发项目概述 最近这一直在复习数据结构和算法,也就是前面发出去的排序算法八大基础排序总结,Java实现单向链表,栈和队列就是这么简单,十道简单算法题等等... 被虐得不要不要的,即使是非常简单有时 ...
- particles.js在vue上的运用
转:https://www.jianshu.com/p/c52b3e91c94f 知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的.刚好目前的项目是利用vue框架 ...
- particles.js中文开发手册
2017年6月17日01:06:28 因为自己需要做产品,所以一个好的UI界面也是很重要的,发现这种散射的原子颗粒特效还不错,就弄了一个 官方github:https://github.com/Vin ...
- js实现粒子特效,particles.js的使用
今天偶然看到了一个比较炫酷的js网页.是粒子特效的,就试着用了用.一下是步骤,方便以后查看使用. 1.在网站下载源码https://github.com/VincentGarreau/particle ...
随机推荐
- MonkeyRunner基本操作
1. #导入模块; from com.android.monkeyrunner import MonkeyRunner, MonkeyDevice, MonkeyImage 2. #连接当前设备,并返 ...
- 数据库高级数据库学习--上机练习7(Transact-SQL 函数定义和调用)
上机练习7 在Transact SQL中,有一类特殊的自定义函数,其返回值为一张表,该类自定义函数被称作内嵌(联)表值函数,其基本语句格式如下: CREATE FUNCTION函数名称[( {@参数名 ...
- springMVC入门配置案例
1.spring的jar包下载 进入http://repo.springsource.org/libs-release-local/,然后依次点击org/-->springframework-- ...
- 使用 WebStorm alt+f2 快速打开浏览器测试的一点bug
这个bug是涉及到中英文文件名的问题(不涉及到路径名): Case 1: 中文文件名 当打开alt+f2快捷方式打开含有中文名的html文件时,路径名直接变为localhost,所以找不到要打开的文件 ...
- 059. Spiral Matrix II
题目链接:https://leetcode.com/problems/spiral-matrix-ii/description/ Given a positive integer n, generat ...
- 从STL文件到网格拓扑
原文链接 STL文件是什么 STL文件是网格文件的一种格式,分为二进制和文本两种类型.具体来讲,它定义了一群三角面片,比如下面是一个文本的STL示例: solid geometryplusplus f ...
- 思科设备自动退出配置界面、打断命令输入、禁用DNS查询
1.自动退出配置界面 问题及原因:当设备没有被操作,空闲一段时间后,控制台回到初始化界面.控制台默认会话时间为10分钟,过期后跳转初始化界面 解决办法:配置控制台永不超时 Switch(config) ...
- NoSQL--leveldb
什么是leveldb: leveldb它是一个 NOSQL 存储引擎,它和 Redis 不是一个概念.Redis 是一个完备的数据库,而 LevelDB 它只是一个引擎. LevelDB 还可以将它看 ...
- synchronized(三) 锁的膨胀过程(锁的升级过程)深入剖析
警告⚠️:本文耗时很长,先做好心理准备................哈哈哈 本篇我们讲通过大量实例代码及hotspot源码分析偏向锁(批量重偏向.批量撤销).轻量级锁.重量级锁及锁的膨胀过程(也就是 ...
- sftp服务器配置
环境依赖:openssh-server >=4.8 //ssh -V 查看 安装环境: centos6,centos7 1.创建用户组 sftp groupadd sftp 2.创建登录用 ...