feat(contact): intro animation
This commit is contained in:
32
app/components/Contact/BottomScreen/Bars.vue
Normal file
32
app/components/Contact/BottomScreen/Bars.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
const store = useContactStore();
|
||||
|
||||
const topBarImage = useTemplateRef("topBarImage");
|
||||
const bottomBarImage = useTemplateRef("bottomBarImage");
|
||||
|
||||
useRender((ctx) => {
|
||||
if (!topBarImage.value || !bottomBarImage.value) return;
|
||||
|
||||
ctx.globalAlpha = store.isIntro ? store.intro.stage3Opacity : 1;
|
||||
|
||||
ctx.drawImage(topBarImage.value, 0, store.isIntro ? store.intro.topBarY : 0);
|
||||
ctx.drawImage(
|
||||
bottomBarImage.value,
|
||||
0,
|
||||
store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24,
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img
|
||||
ref="topBarImage"
|
||||
src="/assets/images/contact/bottom-screen/top-bar.png"
|
||||
hidden
|
||||
/>
|
||||
<img
|
||||
ref="bottomBarImage"
|
||||
src="/assets/images/contact/bottom-screen/bottom-bar.png"
|
||||
hidden
|
||||
/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user