水準研究所
Vue.jsを使ってみたいと考え、一度ポートフォリオを作ってみました。
SFのような世界観と脳みそが好きだったので添えてみました。
制作環境
- Vue.js
- Pixi.js
- Netlify
- CLIP STUDIO PAINT
SF風アニメーションの実装
SF映画でよくある頭良さそうなGUIをイメージしました。画像はSVGでCSSのanimationで消したり表示したりを繰り返しています。
コンセプト
SF映画の培養槽をテーマに制作したいと考えていました。
Illustrated by Sinlaire（画像クリックで制作者のサイトへ）
Pixi.jsで泡に見立てた画像にアニメーションをつけています。
モーダルのルーティング
各ページがコンポーネントなので、実は親URLはhome一つしかない構造になっています。 Vue Routerでchildrenによって各記事のコンポーネントとURLを紐づけています。
routerからstoreのモーダル開閉を制御する変数にアクセスすることで、 モーダルを開くと共にURLを変更し、あたかもページが数ページあるように見せています。
