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

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

jqFloat.js – A Floating Effect with jQuery!