Case Study Case Study
Portfolio
Detail
- 制作範囲
- 静的コーディング / Wordpress構築
- 制作期間
- 14日
- 使用言語
- HTML / CSS / JavaScript / PHP
- 使用ツール・CMS
- WordPress / Figma
Point
GSAPで実装するテキストアニメーション
- GSAPのstagger機能を用いて一文字ずつ時間差で出現させる、高パフォーマンスなアニメーションを実現しています。
- Intersection Observerで「画面に入った瞬間」を正確に検知してGSAPを発火させる設計です。
制作のこだわりを瞬時に伝える3つのポイント
- 各制作物に対し3つの要点を明示することで、開発時にこだわった点や技術的な意図がひと目で伝わるように構成しています。
- 解説とあわせて実際のアニメーションを確認できるため、静止画だけでは伝わりにくいUIの心地よさを具体的にアピール可能です。
ホバーアクションを活用した直感的な操作スライダー
- ホバー時に「詳細を見る」というラベルを表示させることで、制作ページへの遷移を明確に促す設計です。
- ホバー時に background-position を動かすことで、背景色が斜めに滑り込むようなエフェクトをCSSのみで実現しています。