73177


Javaを中心にWebアプリ開発を主にしています。  
今ホームページ制作にも興味を持ち、色んなサイトを見ているのですが、  
以下のサイトのアニメーションに興味があります。

**このサイトのHoldすると結晶になるようなアニメーションはどんな技術を使っていますでしょうか？  
あるいは調べ方を教えていただけますと幸いです。**

<https://tsuyoshi.in/>

URLがHTMLではないので、サーバーサイドの言語を使っていますでしょうか。  
アドバイス頂けますと幸いです。


CC BY-SA 4.0
2021-01-09T12:06:01.807
73172
2021-01-09T16:04:34.377
2021-01-09T15:06:06.990
32986
40231
question
javascript html html5-canvas three.js webgl
次のホームページのアニメーションの技術を分析したい


## 結論

まずは結論から。greensock社が作成したアニメーションライブラリtweenmaxを利用しているようです。

## 調べ方

ざっくり調べ方ですが、Google
Chromeのデベロッパーツールを開きNetworkタブをまず確認します。ブラウザ上でインタラクティブに動くものはほとんどの場合はJavaScriptで書かれているので、JavaScriptのファイルを確認しに行きます。

このとき、キャッシュを削除した上でファイルサイズソートを行います。  
往々にして何かしらのライブラリを利用してるはずなので、ファイルサイズが大きいものがライブラリと想像できます（もしくは名前から）。  
それっぽいファイルを直接見に行き、`License`などの文字列で検索をかけます。そうるすると利用しているライブラリに関連するURLや作者名などが引っ張ってこれます。

殆ど無いですが、ライセンスが記述されていない場合（ライセンス違反になることのほうが多いので殆どない）は`window`オブジェクトに登録されている変数名から割り出すこともできます。

## 参考

  * <https://developers.google.com/web/tools/chrome-devtools/network>
  * <https://greensock.com/>
  * <https://github.com/greensock/GSAP>
  * <https://www.npmjs.com/package/gsap>


CC BY-SA 4.0
2021-01-09T16:04:34.377
73177
2021-01-09T16:04:34.377
7997
73172
answer