#canvas #svg
https://panasonic.jp/shaver/lamdash/dna.html
上記のようなサイトはどうやって作られるのでしょうか。
どんなツールで作られてるのかご教授頂ければ幸いです。
まずはPhotoshopでつくってAnimateCCとかで作ってるのでしょうか。
一緒に読まれている質問
- #修正 修正内容を具体的に指摘してこないクライアントにあたってしまい、非常に困っています。クライアントからの修正の指摘といえば、...
- #経営 WEB制作会社の、経営者はやはりブログやツイッター、SNSをやってるのが当たり前でしょうか？
- #mac MacにてUSBを取り外す際に、カーソル操作ではなく、ターミナルから安全な取り外しを行う事は可能なのでしょうか？また、可...
- エックスサーバーで運用しているサイトにGoogleアナリティクス 360（Googleアナリティクスの有料版）タグを追加...
- #質問 こちらのサイトのローディング時のアニメーションの仕組みがわからないのですが、分かる方いらっしゃいますでしょうか。http...
- #修正 修正内容を具体的に指摘してこないクライアントにあたってしまい、非常に困っています。クライアントからの修正の指摘といえば、...
- フリーの人に質問。会社員じゃなくてフリーを選んだ理由ってなに？どんな目標に向けてフリーでやってるの？
- #コーディング Webデザイナーです。コーダーにコーディングを頼むと、1ページにつき必ず3〜5箇所ミスがあります。これって普通のレベルで...
- #経営 WEB制作会社の、経営者はやはりブログやツイッター、SNSをやってるのが当たり前でしょうか？
- エックスサーバーで運用しているサイトにGoogleアナリティクス 360（Googleアナリティクスの有料版）タグを追加...
9 件の回答
AIが自動で作ってる
ホームページビルダーで検索してみよう！
3Dの部分はWebGLという技術を使った3D描画
canvas上に描画されてます
有名なライブラリにthree.jsがあります
でもこのサイトではライブラリは使ってないっぽい
20年前に流行って廃れたFlashを彷彿とさせるデザインですね。なんだか懐かしい。
Re:4
そうなんですよ、ライブラリ使ってないみたいなんでどうやってるのかなって気になりまして。。
GreenSock っての使ってるみたいよ。dat.GUI も読み込んでるけどどこで使ってんのかな…。
Re:8
GreenSockは有名ですよね。結構使用したりします、それでこれだけできるのはすごいですね～。
3D部分はThree.jsを使ってます。シェーバー部分と顔は3Dモデルを読み込んでますが、それ以外は板ポリに画像を貼ってエフェクトかけているだけです。エフェクトはshaderを使ってgpu側で処理してます。背景は螺旋状にスプライトのパーティクルを散らしてます。
Domのアニメーションはcssでやってますが、3D 側はjsで計算する必要があり、その部分でGreenSockを使ってます。
ただ、全ての要素に対してアニメーションの計算をさせると処理が重くなるので、0から1に変化するアニメーションの処理をさせて、毎フレーム全ての要素にその係数をかけることでアニメーションさせてます。
dat.GUIは開発時にアニメーションのパラメータの調整などに使っていました。