JavaScript

jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

指定した要素をフワフワと浮遊させることができる面白いプラグインを使ってみました。なんか楽しくなってきますね。使い方もとても簡単なのでちょっとしたアクセントにいいかもしれないですね。実際の公式サイトでは雲や蝶蝶を浮遊させたりしています。見ていてちょっと和んじゃいます。ということで以下簡単な使い方です。

[ads_center]

使い方

jQuery本体とダウンロードしたJSファイルを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jqfloat.min.js"></script>

浮遊させたい要素を指定します。

<script>
$(document).ready(function() {
    $('#sample').jqFloat();
});
</script>

HTMLはとりあえずこんな感じにで。

<div id="sample">sample</div>

これだけで簡単に浮遊させることができます。アイディア次第では色々と面白い使い方ができるんではないでしょうか。

オプションもwidthやheight、speedといったものがあります。指定する場合はこんな感じで指定してあげます。

$(document).ready(function() {
    $('#sample').jqFloat({
        width: 100,
        height: 100,
        speed: 1500
    });
});

ポップで楽しい感じのサイトにしたいっていう時なんかに使いたくなるプラグインですね。

WordPressのログイン時のツールバーthe_tagsを使ってWordPressの投稿タグを表示させたり表示形式を替えたりしてみる前のページ

Macでコピペを多用する時に絶対入れた方がいいアプリ「Kopypasta」を使ってみた次のページ

関連記事

  1. no-image
  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  3. JavaScript

    クールでお洒落なナビゲーションを簡単に実装できるjQueryプラグイン「Kwicks for jQu…

    クールでお洒落なナビゲーションを簡単に実装することができるjQuery…

  4. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  5. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  6. JavaScript

    リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.j…

    どこかで使う機会がありそうな感じのjQueryプラグイン「champa…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. King クリーニングティッシュ
  2. PDA-STN36S
  3. クッキー&クリーム ポップコーン
  4. マウイチップス マウイオニオン味
  5. グリーンビーントゥーバー

アーカイブ

PAGE TOP