このサイトの動きを実現するために必要な技術を教えて下さい。

Question

いつもお世話になっております。どうぞ宜しくお願いいたします。

勉強不足でお恥ずかしいのですが、下記のサイトの動きがどう実現されているのかがわかりません。

http://www.wed-camp.com/

上記の部分なのですが、マウスをのせると波打ちますし、マウスを外してもゆらゆら動いています。
初めは動画だろうと思ったのですが、調べてみるとただの画像で、画像にエフェクトをかけているような印象を受けました。

canvas、javascriptを使用しているとは思うのですが、特別なライブラリを使用しているのでしょうか。

検索の文言や、参考サイトでも構いません。
ヒントをご教授頂けますと幸いです。

Answer 1

このサイトかわいい☆

このサイトではdat.gui使ってるね。
http://webhacck.net/archives/1329221.html

Comments

[harashow1701]

間違った回答にプラス評価で、こちらはマイナス評価という不思議。

[think49]

編集前の「このサイトかわいい☆」は回答ではなく、感想に読めました。
編集後の http://webhacck.net/archives/1329221.html は http://www.wed-camp.com/ との関連性が分かりませんでした。
質問者の意に添う形で回答するとプラス評価に繋がるのではないかと…。

[harashow1701]

dat.uiを使用しているのだから、その記事にリンク貼ることには、関連性あると思うけど。

[masaya_ohashi]

気になったので私も関連性を探してみましたが、確かにstatic/original/common-pc/js/lib.jsの中にdat.guiが埋め込まれていますね...よく気付きましたねこれ。

[LanHma]

dat.guiについて調べてみると、まさにこの方法だと感じました。
ありがとうございます！もう少し勉強してみます！

[harashow1701]

リンク先サイトが使っているものとは違いますが、こんなのもありますよ。使ったことはないですが、記憶にはありました。
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-ripples.html

[LanHma]

わざわざありがとうございます！にしてもdat.guiは凄いですね。めちゃ楽しいです！こんなものがあるなんて知識の無さを痛感します！
教えていただきありがとうございます。

Answer 2

• www.wed-camp.com/static/original/common-pc/js/lib.js

上記 JavaScript ファイルにおいて、mousemove イベントで実装していますね。
Chrome Developper Tools で mousemove イベントを削除したら動作が止まりました。
lib.js に Beautify を通せば多少は読みやすくなるでしょう。

• Best Online JavaScript Tool to View,Beautify,Formatter,Minify,Obfuscator Javascript Code

ただ、CPU使用率をかなり消費しており、ノートPCではファンが五月蠅いぐらいに回っていました。
ユーザに優しい実装とは言えないので、私としてはお勧めはしません。

Re: LanHma さん

Comments

[LanHma]

アドバイスありがとうございます！確かにノートパソコンの充電の減り具合が激しくてびっくりしました

Answer 3

パッと見た感じですが、自前のjavascriptとcssで作ってそうです。
Webフォントやcssリセットなんかは読み込んでいるようですが、javascript系ライブラリは読み込んでない雰囲気。"特別なライブラリ"というのは使っていないです。

最近のブラウザ(IE, Edge, Chrome, Firefox)には開発者向けの機能が搭載されていて、F12キー(ファンクション12キー)を押下すると呼び出すことができます。開発者ツールを使うことで、ある程度サイトの構造やソースコードを見ることができるので見てみると良いと思います。上記も開発者ツールで見てみた結果です。

「マウスをのせると波打つ」関係はcssでやってると思います。調べるキーワードにcssを加えてみましょう。記載されたサイトはいくつかのテクニックを組み合わせているので、エフェクトを構成するテクニックを調べて、開発者ツールでサイトのソースを見て実現方法を追っかけていくことになると思います。

Comments

[LanHma]

ご回答ありがとうございました！参考にさせて頂きます！