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. stickUp
  2. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  3. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  4. funnyText.js
  5. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  6. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

コメント

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

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

最近の記事

  1. KPS-88
  2. Happy Plugs AIR1
  3. cheero Stream 10000mAh
  4. BOSE HOME SPEAKER 300
  5. RP-PC112

アーカイブ

PAGE TOP