水準研究所
Vue.js案件を取得した後、どれだけ理解できているか実力を試すために制作したポートフォリオ。
アニメーションの実装など、フロントエンドのスキルを試したかったプレイグラウンド的な要素のある作品。
制作環境
- Vue.js
- Pixi.js
- Netlify
- CLIP STUDIO PAINT
SF風アニメーションの実装
SF映画でよくあるGUIをイメージした直線的な演出を実装している。画像はSVGでCSSのanimationで消したり表示したりを繰り返す。
コンセプト
SF映画の培養槽をテーマに制作したいと考えていた。
Illustrated by Sinlaire（画像クリックで制作者のサイトへ）
Pixi.jsを使用したかったので、泡に見立てた画像にアニメーションを実装する。
水槽の脳（すいそうののう、Brain in a vat）とは、
「自分が体験しているこの世界は、実は水槽に浮かんだ脳が見ているバーチャルリアリティなのではないか」
という懐疑主義的な思考実験(心の哲学まとめwiki)。
画像は下記画像をリスペクトして描き起こしている。
Created by jeremy jozwik（画像クリックで制作者のサイトへ）
モーダルのルーティング
各ページがコンポーネントなので、実は親URLはhome一つしかない。 Vue Routerでchildrenによって各記事のコンポーネントとURLを紐づけている。
routerからstoreのモーダル開閉を制御する変数にアクセスすることで、 モーダルを開くと共にURLを変更し、あたかもページが数ページあるように見せている。
