php粒子背景特效_粒子背景特效Particleground.js插件使用解析

Particleground简介：

Particleground是一个JavaScript插件，用于时髦的后台粒子系统。包括鼠标在桌面设备和移动设备上的陀螺仪控制的可选视差效果。在支持HTML5画布的浏览器中工作。

初始化：

particleground(document.getElementById('your-element');

注意事项：

v1.0.0以上版本支持js原生调用，不必依赖jquery。

具体使用方法：

1)引入文件

2)html

3)js调用

// 原生js(要求v1.0.0以上版本):

particleground(document.getElementById('particles');

//可以根据下面表格中参数说明设定相应参数

particleground(document.getElementById('particles'), {

dotColor: '#ff0000',

lineColor: '#ff0000'

});

// jQuery：

$('#particles').particleground();

//可以根据下面表格中参数说明设定相应参数

$('#particles').particleground({

dotColor: '#ff0000',

lineColor: '#ff0000'

});

参数：

名称

默认值

描述

minSpeedX

0.1

maxSpeedX

0.7

minSpeedY

0.1

maxSpeedY

0.7

directionX

‘center’

可用值 ‘center’, ‘left’ 和’right’.

directionY

‘center’

可用值’center’, ‘up’ 和 ‘down’.

density

10000

确定生成多少料子

dotColor

‘#666666’

点的颜色

lineColor

‘#666666’

线的颜色

particleRadius

粒子半径

Dot size

点的大小

lineWidth

线的宽度

curvedLines

false

线是否弯曲

proximity

100

两个点间多远开始连

parallax

true

视差效果

parallaxMultiplier

数量越低,视差效果更强

onInit

function() {}

初始时调用函数

onDestroy

function() {}

销毁时调用函数

项目地址：

https://github.com/jnicol/particleground

参考：

http://www.jq22.com/jquery-info566

http://www.jqhtml.com/8478.html

php粒子背景特效_粒子背景特效Particleground.js插件使用解析_蓝戒的博客相关推荐

jsecharts如何改变占比_echarts.js多图表数据展示使用小结_蓝戒的博客
// 路径配置 require.config({ paths: { echarts: 'http://localhost/beyondsoft/static/component/echarts/bui ...
ztree 自定义参数_zTree树插件使用方法及自定义控件实践_蓝戒的博客
zTree简介: zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 实践版本:zTree-verso ...
html5和极速模式,浅谈360浏览器6.0版本极速模式与兼容模式_蓝戒的博客
360浏览器升级到6.0版本后对html5实现了全面兼容,于此同时360 6.0版本浏览器提供了两种模式:1.极速模式 2.兼容模式,也就是说360浏览器为双核浏览器.浏览器最核心的部分是渲染引擎(R ...
html控制两个页面转换,html页面切换过度效果实现方案_蓝戒的博客
html页面切换过度效果实现方法很简单,但是对于浏览器的设置有需求,经过测试IE浏览器的默认设置没有问题,但是其他浏览器需要进行设置才可以. 实现方法就是:利用文本头的标记实现页面过渡效果,具体说明 ...
html中移动端遮罩层,移动端微信分享弹出遮罩层js效果_蓝戒的博客
css部分: .btonshare{ width:80%; height:50px; float:left; background:#16bb5c; margin:0 10%; margin-top: ...
jquery可以勾选的下拉框_jquery.chosen下拉框多选插件使用详解_蓝戒的博客
Chosen 是一个支持jquery的selec t下拉框美化插件,它能让丑陋的.很长的selec t选择框变的更好看.更方便.不仅如此,它更扩展了selec t, 增加了自动筛选的功能.它可对列表 ...
js 停顿一秒_js实现文字向上滚动，并且每滚动一行停顿几秒的效果_蓝戒的博客...
前端工程师的一般性特点: 1.技术控,会前端,也会一门非前端语言. 2.对异性的期望较高但是实际情况相反. 3.对IE系列尤其是IE6同仇敌忾. 4.很多人多才多艺,但不经常炫出来. 5.喜欢尝试新鲜 ...
element 手机适配_手机端rem适配方案_蓝戒的博客
方案一: 1.viewport设置: 2.html根元素font-size设置(注:设计稿640px): var deviceWidth = document.documentElement.clie ...
html flex 兼容ie9,flex布局及其兼容解决方案_蓝戒的博客
导语: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现.2009年,W3C提出了一种 ...

php粒子背景特效_粒子背景特效Particleground.js插件使用解析_蓝戒的博客

php粒子背景特效_粒子背景特效Particleground.js插件使用解析_蓝戒的博客相关推荐

最新文章

热门文章