Raindrops.js

JavaScript

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

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

Raindrops.js

Raindrops.js

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

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

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

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

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

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

Image Tilt Effect画像にチルトエフェクトをかけることができる「Image Tilt Effect」前のページ

Bywordでフルスクリーンにするためのショートカットキー次のページ

関連記事

  1. tingle.js

    JavaScript

    シンプルで手軽に実装できるモーダルウィンドウ「tingle.js」

    tingle.jsは、シンプルなモーダルウィンドウを実装できるスクリプ…

  2. Siema

    JavaScript

    軽量でシンプルで依存性のないカルーセルを実装できる「Siema」

    Siemaは軽量でシンプル、そしてjQueryなどの依存性のないカルー…

  3. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  4. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  5. ToxicBox

    JavaScript

    さまざまなコンテンツをポップアップウィンドウで表示できる「ToxicBox」

    ToxicBoxは、ライトボックスのjQueryプラグインです。近年、…

  6. jQuery touchSwipe Carousel

最近の記事

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

アーカイブ

PAGE TOP