water photo 03

Ripple effect | 波紋の効果

こんにちは!
皆様、Ripple effect(リップルイフェクト)というのご存じでしょうか? Ripple effectとは、マウスカーソルをモニター画面(やスマホ画面)で滑らせたりクリックしたりすると、そこから波紋が広がるという効果のことです。私はこれを、よそ様のHome pageで最初に見た時、衝撃が走りました!こんな効果、いったいどうやって実現してるのだろう‼って!これ、ゲームマシン並みのとんでもない演算処理が必要なのではないか、と思いまた。恐らく一昔前にこれを実現するとしたら、本当にとんでもない労力がかかったのだろうと思います。
ところが! 今はこれ、jQuery plug-in (jquery.ripples)で簡単に出来てしまうのです!jQueryというのは、動的な動きを与えるJava Script のライブラリーで、無料で公開されているのでこれを組み込めば出来ちゃうのです!
(https://github.com/sirxemic/jquery.ripples/)
ちょっと作ってみたので、水面にカーソルを当てて、遊んでみて下さい!面白くて、いつまでも遊んじゃいますよねww

カーソルを水面にあてたりクリックしてみてください

但し、素のhtmlに組み込むのであれば簡単ですが、Wordpress で作成されたWeb pageに組み込むとなると、Wordpressには本体に元々jQueryが組み込まれているので、それとripple effect の plug-inをリンクさせる工夫がいります。トライしてみたい方は是非以下よりお問い合わせくださいませ!喜んでヘルプいたします!
error: Content is protected !!
上部へスクロール