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でウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  2. PrognRoll

    JavaScript

    スクロールによるプログレスバーを表示できるjQueryプラグイン「PrognRoll」

    PrognRollはスクロールによるプログレスバーを表示することができ…

  3. Lettering.js

    JavaScript

    一文字ずつスタイルなどを調整できるようにしてくれる「Lettering.js」

    Lettering.jsは一文字ずつCSSなどでスタイルを調整できるよ…

  4. no-image
  5. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  6. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

コメント

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

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

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP