html5 云朵飘动效果,jQuery超有趣的白云飘动特效插件

jQlouds是一款非常有趣的可以制作天空中白云飘动特效的jQuery插件。天空中白云朵朵，你可以通过这个插件来设置云朵的大小、位置、模糊以及被风吹动的效果。

安装

可以使用bower安装这个白云飘动特效插件：

bower install jqlouds --save

使用方法

使用jQlouds插件时需要在页面中引入必要依赖的文件：

这个白云飘动特效的HTML结构非常简单，使用一个空的

元素即可。

你可以在同一个页面创建多个云朵容器，通过多个jQuery选择器来选择不同的元素，每个元素将被随机填充静态的云朵。注意，这些元素将被设置为相对定位，以容纳绝对定位的云朵。

$('#sky1, #sky2').jQlouds();

设置天空的高度

最小的天空高度是最大尺寸云朵的高度，你可以通过CSS或js来设置一个天空高度：

通过CSS:

jQuery(function($) {

$('#sky').jQlouds();

});

通过JS：

jQuery(function($) {

$('#sky').jQlouds({ skyHeight: 223 });

});

白云飘动动画

如果需要制作白云被风吹动的效果，可以按下面的设置：

$('#sky').jQlouds({

wind: true

});

这个插件唯一的缺点是没有提供设置云朵飘动速度的参数。但是如果你想修改速度，可以自己修改源文件中的$.jQlouds.jQloudsAnimate函数中的.animate方法。

云朵的数量

统一天空下云朵的数量被随机的设置为20-30之间。你可以通过minClouds和maxClouds参数来修改它：

$('#sky').jQlouds({

minClouds: 5,

maxClouds: 10

});

最大云朵的尺寸

默认的图片尺寸是227x96 px(默认图片是作为base64图像写在插件中的)。所有的图片都是随机生成的，尺寸小于或等于这个尺寸。你可以通过下面的方法来调整这个尺寸区间：

$('#sky').jQlouds({

maxWidth: 113,

maxHeight: 48,

});

自定义云朵

如果想使用自己的云朵图片，只需要修改src属性即可：

$('#sky').jQlouds({

src: 'path/to/image.png',

});

配置参数

下面是jQlouds支持的所有可用参数：

options = {

src: 'images/cloud.png', // path to image, the default is a base64 (you can see the actual string in sources)

maxWidth: 227, // max image's width

maxHeight: 96, // amx image's height

minClouds: 20, // minimum amount of clouds

maxClouds: 30, // maximum amount of clouds

skyHeight: null, // height of the container element

wind: false // animate clouds, default is false

};

$('#sky').jQlouds(options);