jQlouds

JavaScript

ふわふわと流れるアニメーション付きの雲を実装できるjQueryプラグイン「jQlouds」

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

関連記事

  1. Zoomify

    JavaScript

    画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」

    Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのた…

  2. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  3. jsPanel3

    JavaScript

    多機能なフローティングパネルを実装できるjQueryプラグイン「jsPanel3」

    jsPanel3は、高度で多機能なフローティングパネル(ウィンドウ)を…

  4. Chameleon.js
  5. Swipe-Li

    JavaScript

    スマホ操作に最適!左右のスワイプで有効・無効を選べるjQueryプラグイン「Swipe-Li」

    Swipe-LiというjQueryプラグインを使えば、左右のスワイプで…

  6. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP