97 lines
1.6 KiB
Vue
97 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="background fixed w-full h-full">
|
|
<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-small.webm" type="video/webm"
|
|
media="all and (max-width: 640px)">
|
|
</video>
|
|
</div>
|
|
<section class="splash-screen flex items-center flex-col">
|
|
<figure class="ui">
|
|
<img class="logo" src="/logo.svg">
|
|
</figure>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
body {
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.logo,
|
|
.button,
|
|
.shadow,
|
|
.animation,
|
|
.mix {
|
|
transition: .7s opacity;
|
|
}
|
|
|
|
.screen {
|
|
position: absolute;
|
|
height: 100vh;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.splash-screen {
|
|
position: relative;
|
|
height: 100vh;
|
|
box-shadow: inset black 0px 1px 800px 200px;
|
|
}
|
|
|
|
.animation {
|
|
z-index: 1;
|
|
object-fit: cover;
|
|
opacity: .8;
|
|
/* opacity: 0; */
|
|
}
|
|
|
|
.mix {
|
|
z-index: 4;
|
|
position: fixed;
|
|
}
|
|
|
|
.shadow {
|
|
z-index: 3;
|
|
box-shadow: rgb(0, 0, 0) 0px 0px 170px 70px inset;
|
|
opacity: .9;
|
|
}
|
|
|
|
.ui {
|
|
z-index: 4;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
max-width: 80%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
filter: drop-shadow(8px 8px 0 rgb(0 0 0 / 0.8));
|
|
}
|
|
|
|
.mixPlayer {
|
|
background: black;
|
|
max-height: 70vh;
|
|
}
|
|
|
|
.hide {
|
|
opacity: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.text-shadow {
|
|
text-shadow: 3px 2px 8px black;
|
|
}
|
|
</style>
|