- Coding
Wander Globe
Information
多彩なアニメーションを用いて、視覚的に楽しめるWebサイトを制作しました。
ファーストビューのテキストは一文字ずつ表示され、セクションごとに様々な出現の仕方が楽しめます。画像は左右から流れるように配置し、動きのある表現を実現しています。
さらに、スクロールに連動したアニメーションの発火タイミングを細かく調整し、ストレスのない滑らかな体験を追求しました。
- Client
- Wander Globe
- URL
- https://yamamoriweb.com/wander-globe/
- pass
- demo / demo
- Scope
- コーディング・GSAPを使用したアニメーション
- Date
- 10日
POINT
Rankingセクションでは画像を左右に配置していますが、画面幅が大きくなった際に画像が縦横比を維持したまま拡大すると、隣接するテキストとのバランスが崩れてしまうため、縦サイズは固定し、横幅のみで調整する設計にしています。 また、Figmaカンプから書き出す際は、マスクで隠れている部分も含めて画像を書き出し、object-position を使用して表示位置を調整することで、デザインカンプの見た目を保ったままレスポンシブ対応できるようにしています。
