jQueryで簡単に水面に広がる波紋を作る!新規追加しました。

こんばんは!山本です!

三週間程前から右足を骨折し、松葉杖をつき仕事に向かっていましたが、今日何とかギブスが取れ、楽になりました。足の自由を奪われるのは本当に大変なことです。まだ足を引きずりながらしか歩けないので、完治にはあと1ヵ月はかかると言われました。両親や家族には本当にご迷惑をおかけしました、…気を付けますです、はい….

さて、今回は素材制作から少し離れて、簡単なjQueryプラグインで遊んでみたいと思います。

波紋を作る???なんだそりゃ?とピンとこない方もいらっしゃるのではないでしょうか?jQuery Ripplesはマウスポインタを動かしたりクリックしたりすることで、画面に水面に広がる波紋が生じる、とても幻想的で美しいプラグイン技術です。→DEMO1を見る

もちろんパッドやスマートフォンの画像にも適用されますが、動的・画像的にも一番PC画面で見られるのが美しく鑑賞できると思います。

いそいそと作っていると、家族が後ろから私のPCを覗き込み、「..して、それは何の役に立つのだ?」と首をかしげて聞いてきました。…..美しいのみです!ユーザビリティー、アクセシビリティー、制御に動作、たまにそのようなものを全て取っ払って、「美しい」だけの技術があったっていい!どちらかというと、私はこちらの方が好きです!

昔、まだmacromedia時代のFlashが主流の時代、一度試行錯誤しながら制作したことがあります。幻想的なその水の動きが非常に難しく、黒い皿に水を浅く入れ、何度もスポイドで水を落とし、その光の反射を確認したものです。タイムラインとコードをにらめっこしていた時代はもう本当に終わったのですね…年を取るはずです。

一見難しそうに見えますが、とても簡単に出来る技術で、下記URLに使い方を掲載しています。→jQuery Ripples使い方

コピー&ペーストにてご利用いただけるように、全体像のコードも掲載しています。ダイナミックで凛と美しいデザインに、お気軽にご利用ください。

by 山本

▼▼BLACK SHIVA/jQuery Ripples▼▼

水面の波紋をマウスポインタから画面に発生させる。