43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<template>
|
|
<div class="container mx-auto p-4 inline-flex">
|
|
<atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
|
|
<img src="/zero/sky-a.jpg" data-atropos-offset="-8" />
|
|
<img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
|
|
<img src="/zero/zero-a.png" data-atropos-offset="0" class="absolute inset-0 object-cover" />
|
|
<img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
|
|
<a href="#" data-atropos-offset="0"
|
|
class="absolute w-10 h-5 p-4 bg-red-700 text-center inset-0 rounded-full hover:bg-opacity-70 duration-200">play</a>
|
|
</atropos-component>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
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);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* .my-atropos {
|
|
width: 320px;
|
|
height: 160px;
|
|
} */
|
|
.logo {
|
|
filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
|
|
left: 14%;
|
|
top: 10%;
|
|
}
|
|
</style>
|