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. no-image

    JavaScript

    フレキシブルでモバイルフレンドリーなフォトギャラリー実装「jGallery」

    jGalleryは、フレキシブルでモバイルフレンドリーなフォトギャラリ…

  2. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  3. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  4. no-image

    JavaScript

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

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

  5. jfMagnify
  6. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ

Instagram始めました

Facebookページ

PAGE TOP