株式会社グローバルゲート公式ブログ

Webサイトに「水」の表現を取り入れる

こんにちは。株式会社グローバルゲートのモーリーです。 
 
夏ごろは「よっしゃ今年は久々に阪神優勝や!」と思ってましたが結果は皆様ご存知のとおり。CSでの活躍を期待しています。。。 
 
 
 
さて、今回は「水」を表現するJavascriptライブラリを5点ご紹介したいと思います。 
 
コンピュータグラフィックスの世界において、水は再現が難しいものの代表格でした。複雑な計算が必要なため、低スペックなPCではまともに表示することすらできません。それが家庭用PCやスマートフォンのスペック向上により、気軽にWebサイトの装飾として使えるようになりました。 
 
もっとも、波紋や水滴などの表現はインパクトが強いため、使い方にセンスが問われます。 
面白がって目立つ表現を使ってみただけ、とならないように取り入れていきたいですね。

jQuery Ripples Plugin

公式サイト 
デモ 
 
マウスカーソルの動きによってリアルな水面の動きを実現するjQueryプラグインです。 
波紋の再現は複雑な計算を要求されるために数年前なら使いどころが限られていましたが、最近のPCやスマートフォンなら大抵のことはできてしまいます。 
全画面に配置してダイナミックに使ってみたい表現です。

ちなみにメイドインアビスのホームページで使用されています。
生水にはご注意ください。

Ripple Hover Effect 

公式サイト 
デモ 
 
こちらも水面の動きをシミュレートするライブラリですが、油の浮いた油膜のような表現を行います。サイバーでディストピアでアバンギャルドな雰囲気になりますので、どこで使うか制作者のセンスが問われます。 

RainyDay.js

公式サイト 
デモ 
 
窓ガラスに落ちる水滴を表現するライブラリです。 
水滴そのものも水滴が落ちて流れていくさまもとてもリアルでいつまでも眺めていたくなります。 
ガラスメーカー、エクステリア、温浴施設、サウナ、ホットヨガ、などいろいろと使ってみたい業種がありますのでご相談をお待ちしています。

Wavify

公式サイト 
デモ 
 
これまで紹介したライブラリはリアルな水を表現したものでしたが、こちらは曲線の動きを単色でシンプルに表現するライブラリです。シンプルな印象なのでフラットデザインやイラストベースのWebサイトでも使いやすいと思います。

legitRipple.js

公式サイト 
デモ 
 
クリックした箇所から波紋のように円が広がります。 
小さなボタンでもこのライブラリを使うことでクリックしたときの面白さを表現することができます。

まとめ

今回はWebサイトに水の表現を取り入れるJavascriptライブラリをご紹介しました。
単純なアニメーションだけでは差別化を図りにくくなっている昨今、当社では様々な表現技法を模索しつつ費用対効果のあるWebサイトづくりを目指しています。
ご質問やお見積依頼など、お気軽にご相談ください。

【関連記事】

ご相談・お問い合わせ

当社サービスについてのお問い合わせは下記までご連絡下さい。

お電話でのお問い合わせ

06-6121-7581 / 03-6415-8161