105 lines
1.7 KiB
Vue
105 lines
1.7 KiB
Vue
<script setup>
|
|
import {onMounted} from "vue";
|
|
import {useUi} from "@/pinia/ui";
|
|
|
|
const ui = useUi()
|
|
|
|
onMounted(() => {
|
|
const audio = new Audio('/DPIntro.mp4');
|
|
audio.play()
|
|
|
|
let $image = document.querySelector("#intro-image")
|
|
let $text = document.querySelector("#intro-text")
|
|
let $back = document.querySelector("#intro")
|
|
|
|
setTimeout(() => {
|
|
$image.setAttribute("class", 'active');
|
|
}, 3500)
|
|
|
|
setTimeout(() => {
|
|
$text.setAttribute("class", 'active');
|
|
}, 4500)
|
|
|
|
setTimeout(() => {
|
|
$text.setAttribute("class", 'inactive');
|
|
$image.setAttribute("class", 'inactive');
|
|
|
|
setTimeout(() => {
|
|
//ui.intro = false;
|
|
$back.setAttribute("class", 'inactive');
|
|
setTimeout(() => {
|
|
ui.intro = false;
|
|
}, 3000)
|
|
}, 3000)
|
|
}, 9000)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div id="intro" flex flex-center>
|
|
<div flex flex-column flex-center>
|
|
<img id="intro-image" src="/DigitalPower.png">
|
|
<h2 id="intro-text" noselect="" class="mt-4">La fabrica de aplicaciones <br> Web</h2>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
#intro {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background: white;
|
|
z-index: 100000000;
|
|
}
|
|
|
|
.active {
|
|
animation: activate 3s forwards;
|
|
}
|
|
|
|
.inactive {
|
|
animation: deactivate 3s forwards;
|
|
}
|
|
|
|
img {
|
|
width: 240px;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
h2 {
|
|
color: var(--primary);
|
|
margin: unset !important;
|
|
text-align: center;
|
|
}
|
|
|
|
img, h2 {
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes activate {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes deactivate {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
</style> |