どのような技術が使われているウェブサイトなのか知りたいです

Question

見つけたサイトについてどのような技術が使われているか、
調べ方がわからずこちらで質問をさせていただきました。

①ホムンクルス
マウスを画像上に載せるとクシュっとなるこの動きは何が使われているのでしょうか？

②クリエイティブエージェンシー
トップページのマウスに合わせて、背景の向きが変わる技術や、
ページ移行の際にも背景が動く動きはどのような技術が使われているのでしょうか。。？

有識者の方がいらっしゃいましたら、ご教授いただけますと幸いです。
どうぞよろしくお願い致します。

Comments

[m.ts10806]

知ってどうしたいのでしょうか

Answer 1

①ホムンクルス
中身を確認しようとしたら

「どうやって作ってるのか気になったそこの方！
ホムンクルスではインタラクティブコンテンツに興味のあるディレクター,アートディレクター/デザイナー,フロントエンドエンジニアを絶賛募集しています！」
と隠しメッセージが表示されました。

基本ここのサイトは<canvas>タグというHTML5で導入された画像や線を表示させる技術を利用されているみたいです。
「フラクタル図形」なども<canvas>タグで書かれていました。

マウスを画像上に載せるとクシュっとなる

この辺りも<canvas>タグでした。

②クリエイティブエージェンシー
こちらも同じく<canvas>タグでした。

<canvas>タグは2D処理だけでなく3D処理にも対応したアドインなどがありそれをふつう利用するのですが
こちらはオリジナルでおこなっているようですね。

トップページのマウスに合わせて、背景の向きが変わる

<canvas>タグが画面いっぱいに設定してあり、マウスイベントで位置をひろって映像を変化させています。

先にも書きましたが<canvas>タグというHTML5で導入された技術により
いままでブラウザでできない表現が可能となりました。
(windowsの3Dペイントのような機能だと思えばわかりやすいでしょうか？)

最新ブラウザにしか対応していなかったので採用を控えていた所も
最新ブラウザ普及率の高まりから採用する所もふえてきたようですね

Comments

[kii.32]

ありがとうございます！
canvasが使われているのですね、、、
3D処理もできるとは知らなかったです。。。

ご丁寧にありがとうございました。感謝いたします。