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
});
这个插件唯一的缺点是没有提供设置云朵