Water Wave Effect jQuery

JavaScript

波の動きのようなアニメーションを実装できる「Water Wave Effect jQuery」

Water Wave Effect jQueryは、波の動きのような滑らかなアニメーションを実装することができるjQueryプラグインです。ゆったりとウェーブするその姿は、見ているだけでどこか心が穏やかになりそうな気がしますね。

Water Wave Effect jQuery

デモ

デモページでは、白の背景に黒の波が動いているサンプルを見ることができます。左から右へ流れていくその様子は、もう本当の波のようですね。動きもすごく滑らかです。

マークアップでは「canvas」要素を用いています。また、Water Wave Effect jQueryにはオプションもいくつか用意されています。

主なオプション項目は、direction、parent、color、backgroundです。directionの値には「up」と「down」が用意されていて、デフォルト値は「up」になっています。

また、colorのデフォルト値は「#000」とのこと。

使い方もシンプルでわかりやすく、サクッと実装できると思います。ちょっとしたカスタマイズもオプションから手軽にできるのがいいですね。

というわけで、波のような滑らかなアニメーションを実装したいという人は、ぜひ「Water Wave Effect jQuery」をチェックしてみてください。

Water Wave Effect jQuery

関連記事

  1. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  2. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  3. Letter Drop

    JavaScript

    雨のように文字が落ちてくるアニメーションのjQueryプラグイン「Letter Drop」

    Letter DropというjQueryプラグインを使えば、雨のように…

  4. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  5. Valiant 360

    JavaScript

    360度のパノラマ動画を実装できるビデオプレーヤー「Valiant 360」

    Valiant 360はブラウザ上で360度のパノラマ動画・写真を実装…

  6. no-image

    JavaScript

    レスポンシブ対応のシンプルなLightboxプラグイン

    レスポンシブに対応したシンプルなLightboxプラグインを紹介します…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP