bl6.jp

jQloudsというjQueryプラグインを使えば、ふわふわした雲を実装することができます。風で雲が流れるようなアニメーションをつけることもできるので、動きのある可愛い雲を表示させたい時に役立ちますね。以下は使い方です。

[ads_center]

jQloudsの使い方

使い方は、まずjQueryとプラグインを読み込みます。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.jqlouds.js"></script>

プラグインを設定します。

<script>
$(function() {
    $('#sky').jQlouds({
        src: 'images/cloud.png',
        minClouds: 2,
        maxClouds: 6,
        wind: true
    });
});
</script>

あとは雲を表示させたい場所にHTMLタグを記述しておきます。

<div id="sky"></div>

オプション

オプションにあるsrcには画像パスを記述します。minCloudsには雲の最小数を、maxCloudsには雲の最大数を指定することが可能です。

雲を動かす場合には、windをtrueに設定すればOKです。

その他にも、maxWidthやmaxHeightで最大時の幅や高さを指定することもできます。

というわけで、ふわふわした動きの雲を実装できるjQloudsのご紹介でした。

jQlouds