valere/evilspins
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

atropos v2

Browse Source
This commit is contained in:
valere
2024-09-03 23:58:54 +02:00
parent acb0062d51
commit 5bcdde2ff5
9 changed files with 57 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/zero-a.vue Normal file
View File

@@ -0,0 +1,42 @@
<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>

19
components/atropos.vue → components/zero-b.vue
View File

@@ -1,8 +1,10 @@
<template>
<div class="container mx-auto p-4">
<atropos-component ref="atropos" class="my-atropos" active-offset="40" shadow-scale="1.05">
<img src="https://files.erudi.fr/screenshit/41684f3ebccdde7352339aa0ae79bc43d50a2b79.jpg" data-atropos-offset="-5" alt="3D Image 2" />
<img src="/logo.svg" alt="3D Image" data-atropos-offset="0" class="absolute inset-0 w-full h-full object-cover" />
<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-b.jpg" data-atropos-offset="-8" />
<img src="/zero/propeller-b.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
<img src="/zero/zero-b.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" />
</atropos-component>
</div>
</template>
@@ -26,8 +28,13 @@ onMounted(() => {
</script>
<style scoped>
.my-atropos {
/* .my-atropos {
width: 320px;
height: 160px;
}
} */
.logo {
filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.8));
left: 14%;
top: 10%;
}
</style>