リンク先のような動きのあるウェブサイトを作りたい

Question

リンク先のようなウェブサイトを作りたいです。

HTML,Javascript,CSSの経験は7年間あります。Javaのサーバーサイド開発が中心です。

ただこんなウェブサイトを作ってみたいと思う好奇心からウェブサイトのアニメーションやエフェクトももっと学びたいと思っています。

https://brand.denso.com/ja/
このようなスクロールをした際にホップをする動きはどのように作るのでしょうか？

https://butfirstchillout.com/
このような缶がグルグル回るようなアニメーションはどのように作るのでしょうか？

わかる方がいればお願いします。

Answer 1

気になるサイトを調査すれば解ると思いますよ。

• 調査方法は、まずは過去の質問を確認してください。

両サイトともGSAPを使っているようです。
高機能なモーション制作用JSライブラリGSAP/TweenMaxを使ったタイムリマップ表現 - ICS MEDIA

回答を小出しにしているのではなく、調査する力が(特にクライアントサイドは)必要になると思いますので
まずは一度調査して力を付けてみて下さい。

Comments

[k499778]

かしこまりました。ありがとうございます。
調査方法で調べてみたのですが、Java scriptまわりなのかcss,htmlまわりなのかはどのように判断すれば良いでしょうか？

「ウェブサイト　調査　方法」

といった類で調べてみましたが、少し検討が違うものなども出てきて。

やったこととしては、
・ご提示いただいたGSAPのサイトを見る
・デベロッパーツールでhtml,Javascriptの確認をする。
・ウェブサイトアニメーション、エフェクトで検索する
・該当のページを保存しローカルで動かしてみる

といったところです。

[oikashinoa]

調査方法としては以下の記事が参考になると思います。

[Webサイト - サイトの制作方法を調べる方法｜teratail]
- https://teratail.com/questions/236387#reply-343736
- https://teratail.com/questions/236387#reply-343757

[JavaScript - スクロールに合わせてふわっとする動きを実現したいです｜teratail]
- https://teratail.com/questions/249579#reply-361024
- https://teratail.com/questions/249579#reply-361107

[k499778]

ありがとうございます！確認させていただきます

[k499778]

Wappalyzer良いです

[oikashinoa]

良いですよね。
まずはWappalyzerで当たりつけてから調査に入ると楽だと思います。

今後も頑張って下さい。

[oikashinoa]

追記です。
CSS、SVGでの表現がどの程度まで出来そうか知っておくと、JavaScript,CSS,SVGどれでやっているか切り分けるカンが養えますよ。

codepenとかで公開している作品を見ておくと良いです。

[k499778]

codeopenみてみます！