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. JavaScript

    レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery pl…

    Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡…

  2. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  3. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  4. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  5. Mini Previews

    JavaScript

    リンクにホバーするとプレビューが見れるjQueryプラグイン「Mini Previews」

    Mini Previewsは指定したリンクにホバーするとリンク先のプレ…

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP