Raindrops.js

JavaScript

水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装することができるjQueryプラグインです。雨粒が落ちることにより、水面がユラユラと揺れるのがとてもリアルでおもしろいですね。

Raindrops.js

Raindrops.js

デモではいくつかのエフェクトのパターンを見ることができます。小刻みにポタポタ落ちてくるものからユッタリと落ち着いた感じで落ちてくるものまで様々です。

オプションが割と豊富なので、これらの設定を変更することでいろんなパターンに調整することができます。

こんな感じで基本的な使い方はとても簡単です。

jQuery('#sample').raindrops();

color、waveLength、waveHeight、density、rippleSpeedなどなどカスタマイズする上でとても役立つオプションがいろいろ揃っています。

というわけで、水面に雨粒を落とすエフェクトを実装したい方は、ぜひ試してみてはいかがですか?

関連記事

  1. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  2. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

  3. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  4. Jquery modal box plugin
  5. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  6. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP