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. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  2. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  3. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

  4. FrameScrub
  5. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  6. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

コメント

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

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

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP