CloudsJS是一款非常简单的云彩飘动效果jQuery插件。通过该插件你可以制作出多层云彩水平飘动的效果，它使用简单，可以为你的网站添加一些观赏性。

使用方法

使用该白云飘动效果需要引入jQuery和clouds.js以及clouds.css文件。

<link rel="stylesheet" href="css/clouds.css" />
<script src="js/jquery.min.js"></script>
<script src="js/clouds.js"></script>
HTML结构

云彩层分为2个图层，一个是近视图层，一个远视图层。它们分别使用不同的云彩作为背景图片。

<div id="far-clouds" class="stage far-clouds"></div>
<div id="near-clouds" class="stage near-clouds"></div>

页面的主要内容放置在div.content容器中。

<div class="content">
  <!-- 页面内容 -->
</div>
初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该云彩飘动插件。

$(document).ready(function () {
    $("#far-clouds").clouds({
    fps: 30,
    speed: 0.7,
    dir: "left"
    });
    
  $("#near-clouds").clouds({
    fps: 30,
    speed: 1,
    dir: "left"
    });
});

配置参数

  • fps：执行动画的频率。插件会用1000除以这个数值来作为定时完成animate动画的时间。
  • speed：云彩飘动的速度。
  • dir：云彩飘动的风方向。

CloudsJS插件的github地址为：https://github.com/csyntax/CloudsJS