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

jQuery Tooltip Basicカスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」前のページ

垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」次のページparoller.js

関連記事

  1. EZ Tabs jQuery Plugin
  2. no-image

    JavaScript

    レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

    jquery.alertはレスポンシブに対応したモーダルウィンドウ風の…

  3. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  4. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

  5. PWS Tabs jQuery Plugin
  6. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP