创建漂亮动态背景特效的jQuery插件

插件介绍

quietflow.js是一款可以制作漂亮动态背景特效的jQuery插件。通过该jQuery插件你可以制作出星空背景效果,方块马赛克效果,弹性小球效果,渐变效果,线条动画特效等等背景动画特效。

资源点击下载:

quietflow.zip


制作方法

使用该jQuery插件需要引入jQuery和quietflow.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/quietflow.min.js"></script>               
 初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来在你需要制作背景动画的元素上调用该插件。

$("#element").quietflow();
// 或者
$("body").quietflow();              

 配置参数

quietflow.js有许多可用的配置参数。下面的配置参数都对应它们各自不同的theme来使用。

 通用参数
  • theme:选择一种主题。默认值是"starfield"

  • z_Index:canvas对象的z-index。默认值是-1000

例如:

$("body").quietflow({
    theme : "starfield",
    z_Index : -1
})               
 starfield
  • starColor:星星的颜色。默认值为white

  • starSize:星星的最大随机尺寸,默认值为3。

  • speed:动画速度。默认值为100。

 squareFlash
  • squareSize:方块的大小,默认值为10。

  • maxRedmaxGreenmaxBlue:红绿蓝颜色的最大值,这些颜色会随机分配到每一个方块中。默认值都设置为255(100%随机)。

  • speed:新方块产生的速度,单位毫秒,默认值为100。

 vortex
  • mainRadius:大圆的半径,默认值为20。

  • miniRadii:大圆中包含的小圆的半径,默认值为30。

  • backgroundCol:圆的背景颜色,默认值为"#01FAFC"

  • circleCol:圆的颜色,默认值为"#6F6F6F"

  • speed:圆移动的速度,默认值为10。

 bouncingBalls
  • specificColors:如果你不希望圆的颜色被随机分配使用该参数,它接收一组颜色作为参数。默认设置为空。

  • backgroundCol:背景颜色,默认值为"#D6D6D6"

  • maxRadius:圆的最大随机半径,默认值为40

  • bounceSpeed:圆移动的速度,默认值为50。

  • bounceBallCount:圆的数量,默认值为50。

  • transparent:是否将圆设置为50%的透明,默认值为true

 shootingLines
  • backgroundCol:背景颜色,默认值为black

  • lineColor:线条的颜色,默认值为white

  • lineGlow:线条发光的颜色,默认值为white

  • lines:线条的数量,默认值为50。

  • speed:线条闪动的速度,默认值为150。

 simpleGradient
  • primary:渐变的开始色,默认值为"#D4145A"

  • accent:渐变的结束色,默认值为"#FBB03B"

 layeredTriangles
  • specificColors:如果你不希望三角形的颜色被随机分配使用该参数,它接收一组颜色作为参数。默认设置为空。

  • backgroundCol:背景颜色,默认值为"#D6D6D6"

  • triangles:三角形的数量,默认值为50。

  • transparent:是否将三角形设置为50%的透明,默认值为true

 cornerSpikes
  • specificColors:如果你不希望圆形的颜色被随机分配使用该参数,它接收一组颜色作为参数。默认设置为空。

  • backgroundCol:背景颜色,默认值为black

  • lineColor:线条的颜色,默认值为white

  • lineGlow:线条发光的颜色,默认值为white

  • speed:闪烁的速度,默认值为100。

 floatingBoxes
  • specificColors:如果你不希望圆形的颜色被随机分配使用该参数,它接收一组颜色作为参数。默认设置为空。

  • backgroundCol:背景颜色,默认值为"#D6D6D6"

  • boxCount:盒子的数量,默认值为400。

  • maxBoxSize:最大随机盒子的长度,默认值为40。

  • transparent:是否将盒子设置为50%的透明,默认值为true

文章来至于网络http://www.htmleaf.com/jQuery/Layout-Interface/201508072370.html

相关推荐

评论