337 lines
8.0 KiB
Vue
337 lines
8.0 KiB
Vue
<template>
|
||
<div class="containers">
|
||
<div
|
||
class="vision-title"
|
||
ref="mTab"
|
||
id="bgTest"
|
||
:style="{ transform: 'translateY(' + -positionY1 + 'px)' }"
|
||
>
|
||
TEAM
|
||
</div>
|
||
<div class="content">
|
||
<div class="content-top">
|
||
<div class="content-left" ref="contentLeft">
|
||
<div class="mission">
|
||
<img src="@/assets/img/about/mission.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="content-right">
|
||
<div class="title">Vision & Mission</div>
|
||
<div class="title-boder">
|
||
<img src="@/assets/img/about/vision-title-boder.png" alt="" />
|
||
</div>
|
||
<div class="slogan">
|
||
<div class="cebg-stands">
|
||
<ScrollAnimatedText text-color="#5D5D5D">
|
||
Our goal is to produce a game that is very enjoyable to play and
|
||
has an excellent economic design that allows players to feel the
|
||
joy of playing while being able to earn tokens.
|
||
</ScrollAnimatedText>
|
||
</div>
|
||
<div class="cebg-batlegrounds">
|
||
<ScrollAnimatedText text-color="#5D5D5D">
|
||
At the same time, a community co-creation and sharing mechanism
|
||
is used to disrupt the existing content and value-sharing model
|
||
so that creativity and value can flourish in the community
|
||
</ScrollAnimatedText>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-bottom">
|
||
<div class="team-boder">
|
||
<div class="team-title">TEAM</div>
|
||
<div class="team-boder-img">
|
||
<img src="@/assets/img/about/team-boder.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<!-- <div class="card-list">
|
||
<div class="card-item" v-for="team in cardText">
|
||
<div class="child">
|
||
|
||
</div>
|
||
<Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
|
||
</div>
|
||
</div> -->
|
||
<AxisSlider></AxisSlider>
|
||
</div>
|
||
</div>
|
||
<div class="banner-boder">
|
||
<img src="@/assets/img/about/vision-bottom-boder.png" alt="" />
|
||
</div>
|
||
<div class="vidion-bg">
|
||
<img src="@/assets/img/about/team-bg.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, reactive, onMounted } from "vue";
|
||
import Grid9Panel from "./Grid9Panel.vue";
|
||
import AxisSlider from "./AxisSlider.vue";
|
||
import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
|
||
import { gsap } from "gsap";
|
||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
const Y1 = ref(0);
|
||
const ratio = ref(0.2); //视差偏移率
|
||
const positionY1 = ref(0); //背景Y轴偏移量
|
||
const contentLeft = ref(null);
|
||
const animationTriggered = ref(false);
|
||
const cardText = [
|
||
{
|
||
name: "Michael Yue",
|
||
title: "Founder",
|
||
slogan:
|
||
"Co-Founder of Giant Interactive(NYSE:GA)<br/>Ops Manager in Shanda Group",
|
||
},
|
||
{
|
||
name: "Yoda",
|
||
title: "Gaming Economist",
|
||
slogan: "CDO of Foxconn GroupGaming data expert in Giant Interactive",
|
||
},
|
||
{
|
||
name: "Super G.",
|
||
title: "Producer",
|
||
slogan: "Worked in Shanda Group with 4 million-player games.",
|
||
},
|
||
{
|
||
name: "Xin",
|
||
title: "CTO",
|
||
slogan:
|
||
"In Charge of Legend, Legends of the World,The Romance of Legends, etc.",
|
||
},
|
||
];
|
||
onMounted(() => {
|
||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||
let bgTest = document.getElementById("bgTest");
|
||
Y1.value = bgTest.offsetTop * ratio.value;
|
||
contentLeftAnimation();
|
||
});
|
||
function contentLeftAnimation() {
|
||
gsap.from(contentLeft.value, {
|
||
x: -1000,
|
||
duration: 1,
|
||
ease: "power2.out",
|
||
});
|
||
}
|
||
function isContentLeftVisible() {
|
||
const rect = contentLeft.value.getBoundingClientRect();
|
||
const windowHeight =
|
||
window.innerHeight || document.documentElement.clientHeight;
|
||
return rect.top <= windowHeight && rect.bottom >= 0;
|
||
}
|
||
function handleScroll() {
|
||
if (!animationTriggered.value && isContentLeftVisible()) {
|
||
contentLeftAnimation();
|
||
animationTriggered.value = true;
|
||
}
|
||
const scrollTop =
|
||
window.pageYOffset ||
|
||
document.documentElement.scrollTop ||
|
||
document.body.scrollTop;
|
||
positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.containers {
|
||
padding-bottom: 116px;
|
||
position: relative;
|
||
.banner-boder {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -100px;
|
||
}
|
||
.vision-title {
|
||
position: absolute;
|
||
left: 21%;
|
||
bottom: 380px;
|
||
font-size: 210px;
|
||
font-family: "Big John";
|
||
font-weight: 400;
|
||
color: #d7d7d7;
|
||
letter-spacing: 160px;
|
||
z-index: -1;
|
||
}
|
||
.vidion-bg {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -3;
|
||
}
|
||
.team-boder-img {
|
||
width: 400px;
|
||
}
|
||
.content {
|
||
width: 1440px;
|
||
margin: 0 auto;
|
||
|
||
.content-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.title {
|
||
padding-top: 174px;
|
||
margin-left: 38px;
|
||
font-size: 48px;
|
||
font-family: "Big John";
|
||
font-weight: 400;
|
||
font-style: italic;
|
||
color: #000000;
|
||
}
|
||
.title-boder {
|
||
width: 689px;
|
||
padding-top: 10px;
|
||
height: 58px;
|
||
img {
|
||
width: 100%;
|
||
}
|
||
padding-bottom: 30px;
|
||
}
|
||
.slogan {
|
||
width: 622px;
|
||
padding-top: 36px;
|
||
margin-left: 49px;
|
||
font-size: 16px;
|
||
font-family: "Poppins";
|
||
font-weight: bold;
|
||
color: #000000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.cebg-batlegrounds {
|
||
// padding-top: 30px;
|
||
}
|
||
}
|
||
.mission {
|
||
padding-top: 13px;
|
||
width: 656px;
|
||
height: 587px;
|
||
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
}
|
||
.content-bottom {
|
||
margin-top: 45px;
|
||
padding-bottom: 310px;
|
||
.team-boder {
|
||
position: relative;
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
img {
|
||
width: 100%;
|
||
}
|
||
.team-title {
|
||
font-size: 48px;
|
||
font-family: "Big John";
|
||
font-weight: 400;
|
||
font-style: italic;
|
||
color: #1a1919;
|
||
}
|
||
}
|
||
.card-list {
|
||
padding-top: 100px;
|
||
padding-bottom: 251px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.card-item {
|
||
position: relative;
|
||
width: 330px;
|
||
background: rgba(236, 46, 91, 1);
|
||
border-radius: 12px;
|
||
height: 456px;
|
||
|
||
overflow: hidden;
|
||
.child {
|
||
position: absolute;
|
||
width: 270px;
|
||
height: 270px;
|
||
left: 30px;
|
||
top: 30px;
|
||
// background-image: url("@/assets/img/about/card-bg.png");
|
||
background-size: cover;
|
||
transition: transform 0.5s ease-in-out;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
.card-item:hover .child {
|
||
transform: scale(1.78);
|
||
opacity: 0.3;
|
||
|
||
top: 80px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.grid {
|
||
width: 100%;
|
||
height: 96px;
|
||
cursor: pointer;
|
||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
animation: myfirstnone 0.5s alternate 1 forwards;
|
||
}
|
||
.card-item:hover {
|
||
transform: scale(1.019) translate(0px, -15px);
|
||
}
|
||
.card-item:hover .grid {
|
||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
animation: myfirst 0.5s alternate 1 forwards;
|
||
}
|
||
|
||
@keyframes myfirst {
|
||
0% {
|
||
height: 96px;
|
||
}
|
||
100% {
|
||
height: 396px;
|
||
}
|
||
}
|
||
@keyframes myfirstnone {
|
||
0% {
|
||
height: 396px;
|
||
}
|
||
100% {
|
||
height: 96px;
|
||
}
|
||
}
|
||
@keyframes myfirstcard1 {
|
||
0% {
|
||
left: 30px;
|
||
top: 40px;
|
||
width: 270px;
|
||
height: 270px;
|
||
}
|
||
100% {
|
||
left: 0px;
|
||
top: 0px;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
@keyframes myfirstcard2 {
|
||
100% {
|
||
left: 30px;
|
||
top: 40px;
|
||
width: 270px;
|
||
height: 270px;
|
||
}
|
||
0% {
|
||
left: 0px;
|
||
top: 0px;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
</style>
|