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. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  2. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

  3. Sliding Panels Template
  4. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

  5. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

  6. cascadingDivs

コメント

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

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

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP