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. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  2. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  3. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  4. infiniteSlider2.js
  5. t.js

    JavaScript

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

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP