[jQuery]要素をふわふわを動かすプラグイン「jqFloat」

2019年9月13日2021年4月16日

1 必要なファイルをダウンロードしよう
2 jqFloatを読み込む
3 全ソースコード

こんにちは、浦島です
今回は要素をふわふわと動かすjQueryのプラグイン「jqFloat」を紹介していきます。

必要なファイルをダウンロードしよう

jqFloat
公式サイトからファイルをダウンロードしましょう。

ダウンロードしてきたファイルを解凍しましょう。

今回必要なファイルはこの二つ

今回は「bird.jpg」にしています。

jqFloatを読み込む

<script src="jquery.min.js"></script>
<script src="jqfloat.js"></script>

1 2	<script src="jquery.min.js"></script> <script src="jqfloat.js"></script>

index.htmlにjavascriptを読み込んで最終的にはこんな感じ

全ソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jqfloat</title>
    <style>
        .img-center {
            text-align: center;
        }

        .bird {
            height: 200px;
            width: 200px;

            margin: 0 auto;

        }
    </style>
</head>

<body>
    <div class="img-center">

        <h1>jqfloat デモ</h1>
        <img class="bird" src="bird.png" alt="">
    </div>

</body>

</html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jqfloat.js"></script>
<script>
    $(document).ready(function () {
        $('.bird').jqFloat({
            width: 100,
            height: 100,
            speed: 1000
        });
    });

</script>