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. Glide.js
  2. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  3. Material Design Responsive Table
  4. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  5. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  6. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

コメント

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

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

最近の記事

  1. COMOLI ダブルレイヤー L/Sクルー
  2. メキシコ オアハカ
  3. ドリップ
  4. チェリー
  5. 温泉水99

アーカイブ

PAGE TOP