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にすることで背景にグリッド線を入れることができます。

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

ZWILLING ツインS ネイルクリッパーZWILLINGの極薄軽量の爪切り「ツインS ネイルクリッパー」レビュー前のページ

スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」次のページstacky

関連記事

  1. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  2. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

  3. syncscroll

    JavaScript

    2つ以上のスクロールエリアを同時にスクロールできる「syncscroll」

    syncscrollは2つ以上のスクロールエリアを同時にスクロールでき…

  4. no-image

    JavaScript

    豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

    startValは豊富なオプションやAPIを有したカスタマイズ性の高い…

  5. no-image

    JavaScript

    多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」…

    frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレ…

  6. jQuery fatNav

    JavaScript

    ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

    jQuery fatNavはミニマルテイストなフルスクリーンのナビゲー…

コメント

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

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

最近の記事

  1. フィールグッドシャワー
  2. RP-PB055
  3. ESD-EFシリーズ

アーカイブ

PAGE TOP