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

t.jsタイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」前のページ

【ソースコード閲覧】iPhone6/6 PlusやiOS8のSafariエクステンションに対応したアプリ「View Source」次のページView Source

関連記事

  1. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

  2. ScrollMe

    JavaScript

    シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

    ScrollMeというjQueryプラグインを使えば、シンプルでスタイ…

  3. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  4. jQuery Brazzers Carousel Plugin
  5. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  6. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP