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
    });
});

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

関連記事

  1. Animated Page Transition
  2. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  3. Timeline.js

    JavaScript

    スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」

    Timeline.jsは、スライド式によるタイムラインを実装することが…

  4. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  5. JS Form Validator

    JavaScript

    HTMLフォームの検証を簡単に実装できる「JS Form Validator」

    JS Form ValidatorはHTMLフォームの検証を簡単に実装…

  6. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

コメント

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

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

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP