BinarySandia04
8099a687fd
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 1m6s
45 lines
925 B
Vue
45 lines
925 B
Vue
<template>
|
|
<!-- <h1>ARANROIG.COM</h1>-->
|
|
|
|
<Container>
|
|
<img ref="redDragon" class="pixelated" id="red-dragon" src="/sprites/dragon/frame1.png" width="180">
|
|
<p>Hi, I'm Aran!</p>
|
|
<p>Welcome to my website! It is still under construction, so come back later!</p>
|
|
<ul>
|
|
<li>Hello</li>
|
|
</ul>
|
|
</Container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
const redDragon = ref(null);
|
|
|
|
const path = "/sprites/dragon/";
|
|
const frames = [
|
|
"frame1.png",
|
|
"frame2.png",
|
|
"frame3.png",
|
|
"frame4.png",
|
|
"frame5.png"
|
|
];
|
|
|
|
let current = 0;
|
|
const fps = 4; // 10 frames per second
|
|
|
|
onMounted(() => {
|
|
setInterval(() => {
|
|
current = (current + 1) % frames.length;
|
|
redDragon.value.src = path + frames[current];
|
|
}, 1000 / fps);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#red-dragon {
|
|
position: absolute;
|
|
top: -105px;
|
|
right: 20px;
|
|
}
|
|
</style> |