JavaScript

ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

WaveというjQueryプラグインを使ってみました。これを使えばウェーブ(波形)を簡単に描くことができます。オプションを指定することでウェーブの形状を変えることもできます。他にも背景にグリッド線を入れることも可能です。使いどころは限られるかもしれませんが、波形を利用した視覚的効果で伝えたい時なんかに役立ちそうですね。以下は使い方です。

[ads_center]

Waveの使い方

Wave

実際に使用してみると、こんな感じで簡単にウェーブを描くことができます。

使い方は、head内にjQuery本体とダウンロードしたプラグインファイルを読み込みます。

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.wave.js"></script>

プラグインを呼び出します。

$(function() {
    $("#wave").wave();
});

HTMLではウェーブが挿入される要素を記述しておきます。

<div id="wave"></div>

とてもシンプルな使い方ですね。

オプション

オプションを指定する場合は以下のように記述します。

$(function() {
    $("#wave").wave({
        width: 800,
        amplitude: 40,
        color: "red",
        phase: -90,
        grid: true
    });
});

gridをtrueにすることで背景にグリッド線を入れることができます。

ということで、他にも色々なオプションが用意されているので詳しく知りたい方は以下からチェックしてみて下さい。

関連記事

  1. jQuery.Flexdatalist

    JavaScript

    テキスト入力候補を表示させれる「jQuery.Flexdatalist」

    jQuery.Flexdatalistはテキスト入力候補を表示させるこ…

  2. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  3. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  4. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  5. JavaScript

    テーブルを綺麗なデザインにしてくれたり並び替え(ソート)もできるjQuery「tablesorter…

    jQueryのプラグインで、テーブルをフレキシブルなデザインにしてくれ…

コメント

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

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

最近の記事

  1. M360bt

アーカイブ

PAGE TOP