82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<template>
|
|
<div class="container">
|
|
<p class="bottom-top" ref="slogan">
|
|
Counter Fire is the highly-anticipated first blockchain-based game to offer a
|
|
unique combination of MOBA and Battle Royale gameplay. With funding from
|
|
over 13 institutional investors, and is set to revolutionize the crypto
|
|
gaming industry.
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const route = useRoute();
|
|
const slogan = ref(null);
|
|
let observer;
|
|
|
|
const animateElement = (el) => {
|
|
el.style.opacity = 0;
|
|
el.style.transform = "translateY(90px)";
|
|
|
|
observer = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
el.style.transition = "opacity 2s ease, transform 2s ease";
|
|
el.style.opacity = 1;
|
|
el.style.transform = "translateY(0)";
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
}, {});
|
|
|
|
observer.observe(el);
|
|
};
|
|
|
|
onMounted(() => {
|
|
animateElement(slogan.value);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
observer.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
display: grid;
|
|
}
|
|
p {
|
|
box-sizing: border-box;
|
|
font-size: 18px;
|
|
font-family: "Poppins";
|
|
background-image: linear-gradient(#ffffff 100%, #ffffff 100%, #ffffff 100%);
|
|
background-repeat: repeat-y;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #757575;
|
|
line-height: 28px;
|
|
word-spacing: 2px;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
// color: transparent;
|
|
}
|
|
.bottom-top {
|
|
text-align: center;
|
|
background-size: 100% 0%;
|
|
background-position: bottom right;
|
|
}
|
|
.animate {
|
|
animation: slideup-text 2s 1 forwards;
|
|
}
|
|
@keyframes slideup-text {
|
|
100% {
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
</style>
|