332 lines
12 KiB
Vue
332 lines
12 KiB
Vue
<template>
|
|
<section class="focus-areas-view" :style="isCssStyle">
|
|
<div class="focus-areas-view-wrap">
|
|
<h1 class="focus-areas-view-h1 wow fadeInUpBig">Focus Areas</h1>
|
|
<h6 class="focus-areas-view-h6 wow fadeInUp" data-wow-delay=".3s">The future is crafted by people who understand where things are heading.</h6>
|
|
<p class="focus-areas-view-p wow fadeIn" data-wow-delay=".5s">The next innovation is already here.We believe that decentralization has the power to transform the global economy and create the largest one time shift in wealth.</p>
|
|
<div class="focus-areas-view-wheel">
|
|
<div id="home-hero" class="hero">
|
|
<div id="home-circles" class="container flex-grow-1 d-flex">
|
|
<div class="spin-circle-container">
|
|
<div class="spin-outer-container">
|
|
<div id="spinOuterCircle">
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/5.png')">
|
|
</div>
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/2.png')">
|
|
</div>
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/3.png')">
|
|
</div>
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/4.png')">
|
|
</div>
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/5.png')">
|
|
</div>
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/6.png')">
|
|
</div>
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/1.png')">
|
|
</div>
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/2.png')">
|
|
</div>
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/4.png')">
|
|
</div>
|
|
<div class="outer-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/6.png')">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="spin-inner-container">
|
|
<div id="spinInnerCircle">
|
|
<div class="inner-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/7.png')">
|
|
</div>
|
|
<div class="inner-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/8.png')">
|
|
</div>
|
|
<div class="inner-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/9.png')">
|
|
</div>
|
|
<div class="inner-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/10.png')">
|
|
</div>
|
|
<div class="inner-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/8.png')">
|
|
</div>
|
|
<div class="inner-item">
|
|
<img v-lazy="assetsUri('images/FocusAreas/9.png')">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-circle-text-container">
|
|
<div class="hero-circle-text">
|
|
<div id="hero-text-1">
|
|
<p class="wow fadeInUp" data-wow-delay=".3s">We focused exclusively on disruptive innovations related</p>
|
|
<p class="wow fadeInUp" data-wow-delay=".3s">to the Public chain ecosystem, Web3, NFT, GameFi, Layer2,</p>
|
|
<p class="wow fadeInUp" data-wow-delay=".3s">DeFi , Metaverse and other fields.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import { assetsUri } from "../../utils";
|
|
import gsap from 'gsap'
|
|
import ScrollTrigger from './ScrollTrigger.js'
|
|
import Jquery from 'jquery'
|
|
gsap.registerPlugin(ScrollTrigger)
|
|
export default {
|
|
name: "FocusAreas",
|
|
props:{
|
|
cssStyle:{
|
|
type:Object,
|
|
default:()=>{
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
assetsUri,
|
|
};
|
|
},
|
|
mounted () {
|
|
const _this = this// 赋值vue的this
|
|
Jquery(window).on('resize', function () {
|
|
_this.setCircleSizes()
|
|
ScrollTrigger.refresh()
|
|
|
|
if (window.innerWidth < 992) {
|
|
Jquery('.remove-for-mobile').remove()
|
|
}
|
|
}).resize()
|
|
|
|
/* Register ScrollTrigger */
|
|
|
|
/* Circle Timeline - Always & First for Speed Controls on Desktop */
|
|
const circleTimeline = gsap.timeline({
|
|
repeat: -1
|
|
})
|
|
|
|
circleTimeline
|
|
.to('#spinInnerCircle', {
|
|
duration: 120,
|
|
rotation: 360,
|
|
ease: 'none'
|
|
})
|
|
.to('#spinOuterCircle', {
|
|
duration: 120,
|
|
rotation: -360,
|
|
ease: 'none'
|
|
}, 0)
|
|
.to('.inner-item', {
|
|
duration: 120,
|
|
rotation: -360,
|
|
ease: 'none'
|
|
}, 0)
|
|
.to('.outer-item', {
|
|
duration: 120,
|
|
rotation: 360,
|
|
ease: 'none'
|
|
}, 0)
|
|
|
|
ScrollTrigger.matchMedia({
|
|
// DESKTOP
|
|
'(min-width: 992px)': function () {
|
|
/* Testimonials */
|
|
|
|
ScrollTrigger.create({
|
|
trigger: '#home-testimonials',
|
|
markers: false,
|
|
toggleClass: 'active',
|
|
pin: '#home-testimonials .content',
|
|
scrub: true,
|
|
invalidateOnRefresh: true
|
|
})
|
|
|
|
/* Posts */
|
|
gsap.defaults({ ease: 'power3' })
|
|
gsap.set('.post-item', { y: 100 })
|
|
|
|
ScrollTrigger.batch('.post-item', {
|
|
onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true }),
|
|
onLeave: batch => gsap.set(batch, { opacity: 0, y: -100, overwrite: true }),
|
|
onEnterBack: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
|
|
onLeaveBack: batch => gsap.set(batch, { opacity: 0, y: 100, overwrite: true }),
|
|
markers: false,
|
|
end: 'bottom+=100px',
|
|
invalidateOnRefresh: true
|
|
})
|
|
|
|
},
|
|
// TABLET OR PHONE
|
|
'(min-width: 400px) and (max-width: 991px)': function () {
|
|
/* Testimonials */
|
|
gsap.set('.testimonials-container', { y: 0 })
|
|
|
|
ScrollTrigger.create({
|
|
trigger: '#home-testimonials .content',
|
|
markers: false,
|
|
pin: true,
|
|
anticipatePin: true,
|
|
start: 'top-=120',
|
|
invalidateOnRefresh: true
|
|
})
|
|
|
|
gsap.set('.testimonial-item', { y: 200 })
|
|
|
|
ScrollTrigger.batch('.testimonial-item', {
|
|
onEnter: batch => gsap.to(batch, { y: 0, overwrite: true }),
|
|
onLeave: batch => gsap.set(batch, { y: 200, overwrite: true }),
|
|
onEnterBack: batch => gsap.to(batch, { y: 0, overwrite: true }),
|
|
onLeaveBack: batch => gsap.set(batch, { y: 200, overwrite: true }),
|
|
invalidateOnRefresh: true
|
|
})
|
|
|
|
/* Posts */
|
|
gsap.defaults({ ease: 'power3' })
|
|
gsap.set('.post-item', { y: 50, opacity: 0 })
|
|
|
|
ScrollTrigger.batch('.post-item', {
|
|
onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true }),
|
|
invalidateOnRefresh: true
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
setCircleSizes () {
|
|
const containerWidth = Jquery('.spin-circle-container').width()
|
|
const innerCircleSize = containerWidth * 0.75
|
|
const outerCircleOverflow = containerWidth * 0.1
|
|
const innerCircleOverflow = Math.round((containerWidth - innerCircleSize) * 0.9)
|
|
const circleSize = containerWidth * 0.05
|
|
|
|
Jquery('#spinOuterCircle').css({ width: containerWidth, height: containerWidth })
|
|
Jquery('.spin-outer-container').css({ top: outerCircleOverflow })
|
|
|
|
Jquery('#spinInnerCircle').css({ width: innerCircleSize, height: innerCircleSize })
|
|
Jquery('.spin-inner-container').css({ top: innerCircleOverflow })
|
|
|
|
this.setupSpinContainer('#spinOuterCircle', '.outer-item', containerWidth / 2)
|
|
this.setupSpinContainer('#spinInnerCircle', '.inner-item', innerCircleSize / 2)
|
|
},
|
|
setupSpinContainer (spinContainer, spinContainerItem, spinRadius) {
|
|
const radius = spinRadius
|
|
const fields = Jquery(spinContainerItem)
|
|
const container = Jquery(spinContainer)
|
|
const width = container.width()
|
|
const height = container.height()
|
|
let angle = 0
|
|
const step = (2 * Math.PI) / fields.length
|
|
|
|
fields.each(function () {
|
|
const x = Math.round(width / 2 + radius * Math.cos(angle) - Jquery(this).width() / 2)
|
|
const y = Math.round(height / 2 + radius * Math.sin(angle) - Jquery(this).height() / 2)
|
|
|
|
Jquery(this).css({
|
|
left: x + 'px',
|
|
top: y + 'px'
|
|
})
|
|
angle += step
|
|
})
|
|
}
|
|
},
|
|
computed:{
|
|
isCssStyle(){
|
|
return this.cssStyle
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
@import './index.less';
|
|
.focus-areas-view{
|
|
background: url("~/static/images/FocusAreas/FocusAreas_bj.png") no-repeat;
|
|
width: 100%;
|
|
background-size: 100% 100%;
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
padding-top: .77rem;
|
|
&-wrap{
|
|
width: 100%;
|
|
max-width: 13rem;
|
|
margin: 0 auto;
|
|
}
|
|
&-wheel{
|
|
margin-top: 0;
|
|
width: 100%;
|
|
height: 7.32rem;
|
|
}
|
|
&-h1{
|
|
font-size: .6rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
line-height: .82rem;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
&-h6{
|
|
margin-top: .1rem;
|
|
margin-bottom: 0;
|
|
font-size: .16rem;
|
|
font-family: Manrope;
|
|
font-weight: 400;
|
|
line-height: .22rem;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
&-p{
|
|
font-size: .22rem;
|
|
font-family: Manrope;
|
|
font-weight: bold;
|
|
line-height: .44rem;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
max-width: 11.22rem;
|
|
margin: .74rem auto 0;
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px){
|
|
.focus-areas-view{
|
|
padding-top: .88rem;
|
|
&-wheel{
|
|
margin-top: 1.5rem;
|
|
height: auto;
|
|
min-height: 5.30rem;
|
|
}
|
|
&-h1{
|
|
font-size: .6rem;
|
|
line-height: .82rem;
|
|
}
|
|
&-h6{
|
|
max-width: 5.5rem;
|
|
margin: 0 auto;
|
|
margin-top: .27rem;
|
|
font-size: .24rem;
|
|
line-height: .32rem;
|
|
}
|
|
&-p{
|
|
max-width: 6.9rem;
|
|
font-size: .3rem;
|
|
line-height: .4rem;
|
|
text-align: center;
|
|
margin: .29rem auto 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|