当前位置：首页 > 网页特效 > 背景

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

分类：背景日期：2024-05-14 点击(0) 评论(0)

演示免费下载

简介

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

####  制作方法

------------

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

```html
<script src="js/jquery.min.js"></script>
<script src="js/quietflow.min.js"></script>        
```        
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来在你需要制作背景动画的元素上调用该插件。

```html
$("#element").quietflow();
// 或者
$("body").quietflow();     
```          
#####  配置参数
quietflow.js有许多可用的配置参数。下面的配置参数都对应它们各自不同的theme来使用。

#####  通用参数 通用参数
theme：选择一种主题。默认值是"starfield"。
z_Index：canvas对象的z-index。默认值是-1000。
例如：

```html
$("body").quietflow({
    theme : "starfield",
    z_Index : -1
})     
```           
#####  starfield
- starColor：星星的颜色。默认值为white。
- starSize：星星的最大随机尺寸，默认值为3。
- speed：动画速度。默认值为100。
#####  squareFlash
- squareSize：方块的大小，默认值为10。
- maxRed，maxGreen，maxBlue：红绿蓝颜色的最大值，这些颜色会随机分配到每一个方块中。默认值都设置为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。

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果