player can switch between compilation

This commit is contained in:
valere
2024-09-08 18:53:20 +02:00
parent 431fc4912b
commit 0c0074ccc1
9 changed files with 419 additions and 280 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="container mx-auto p-4 inline-flex">
<div class="compilation mx-auto p-4 inline-flex">
<atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
<img src="/zero/sky-b.jpg" data-atropos-offset="-8" />
<img src="/zero/propeller-b.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
@@ -10,21 +10,9 @@
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { onMounted, ref } from 'vue'
const atropos = ref(null);
onMounted(() => {
atropos.value.addEventListener('enter', () => {
console.log('Entered');
});
atropos.value.addEventListener('leave', () => {
console.log('Left');
});
atropos.value.addEventListener('rotate', (event) => {
console.log('Rotate', event.detail);
});
});
const atropos = ref(null)
</script>
<style scoped>
@@ -33,7 +21,7 @@ onMounted(() => {
height: 160px;
} */
.logo {
filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
left: 14%;
top: 10%;
}