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

atropos v3

Browse Source
This commit is contained in:
valere
2024-09-04 00:15:32 +02:00
parent 5bcdde2ff5
commit 431fc4912b
2 changed files with 183 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/zero-a.vue
View File

@@ -5,8 +5,7 @@
<img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" /> <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="/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" /> <img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
<a href="#" data-atropos-offset="0" <slot class="absolute" ></slot>
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> </atropos-component>
</div> </div>
</template> </template>

27
pages/index.vue
View File

@@ -18,12 +18,14 @@
<div class="shadow screen" /> <div class="shadow screen" />
<video class="animation screen" loop autoplay muted ref="animation"> <video class="animation screen" loop autoplay muted ref="animation">
<source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm"> <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-big.webm" type="video/webm">
<source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm" media="all and (max-width: 640px)"> <source src="https://files.erudi.fr/evilspins/sloughi-run-loop-small.webm" type="video/webm"
media="all and (max-width: 640px)">
</video> </video>
<div class="mix screen hide"> <div class="mix screen hide">
<video class="mixPlayer screen" controls ref="mixPlayer"> <video class="mixPlayer screen" controls ref="mixPlayer">
<source src="https://files.erudi.fr/evilspins/zero-a-hd.mp4" type="video/mp4"> <source src="https://files.erudi.fr/evilspins/zero-a-hd.mp4" type="video/mp4">
<source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm" media="all and (max-width: 640px)"> <source src="https://files.erudi.fr/evilspins/zero-a-sd.mp4" type="video/webm"
media="all and (max-width: 640px)">
</video> </video>
<button class="button button--close flex justify-center items-center" @click="closePlayer()"> <button class="button button--close flex justify-center items-center" @click="closePlayer()">
<svg width="40px" height="30px"> <svg width="40px" height="30px">
@@ -33,6 +35,16 @@
</button> </button>
</div> </div>
</section> </section>
<section class="flex">
<zero-a>
<button class="button flex justify-center items-center" @click="play()">
<svg width="40px" height="30px">
<polygon points="0,0 0,30 30,15" />
</svg>
</button>
</zero-a>
<zero-b></zero-b>
</section>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// SEO // SEO
@@ -88,7 +100,11 @@
margin: 0; margin: 0;
} }
.logo, .button, .shadow, .animation, .mix { .logo,
.button,
.shadow,
.animation,
.mix {
transition: .7s opacity; transition: .7s opacity;
} }
@@ -155,14 +171,17 @@
color: #fdec50ff; color: #fdec50ff;
font-size: 26px; font-size: 26px;
background-color: #ffffff59; background-color: #ffffff59;
&:hover { &:hover {
background-color: #fdec50ff; background-color: #fdec50ff;
color: black; color: black;
} }
&:active { &:active {
top: 64px; top: 64px;
box-shadow: 0 0 0 0 black; box-shadow: 0 0 0 0 black;
} }
&--close { &--close {
right: 24px; right: 24px;
padding-top: 10px; padding-top: 10px;
@@ -174,8 +193,8 @@
opacity: 0; opacity: 0;
z-index: 0; z-index: 0;
} }
.show { .show {
opacity: 1; opacity: 1;
} }
</style> </style>