Code-Create/src/pages/about-us/our-team.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { gsap, TweenMax, TweenLite } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
//const props = defineProps({
//})
//const emit = defineEmits([
//])
const imgItem1 = ref(null)
let data = reactive({
})
onMounted(()=>{
	let dom = document.querySelector('body')
	let ourListDom = document.querySelectorAll('.our-team-item')
	ourListDom.forEach((item,index)=>{
		gsap.registerPlugin(ScrollTrigger);
		let tl1 = gsap.timeline();
		let img = item.querySelector('.img')
		let textTop = item.querySelector('.text p')
		let textBottom = item.querySelector('.text .bottom-text')
		tl1.from(img,1, {opacity:'0',ease:'power2.out'},0)
		.from(textTop,1, {y:'20px',opacity:'0',ease:'power2.out'},0)
		.from(textBottom,1, {y:'-20px',opacity:'0',ease:'power2.out'},0)
		ScrollTrigger.create({
			trigger: img, // 触发器元素
			start: "top 90%", // 滚动触发器的起始滚动位置
			end: '100% 80%',   // 滚动触发器的结束滚动位置
			markers: false, // 开启标注功能
			animation:tl1,
			scroller:dom,//设置指定元素为滚动依据
			// toggleActions: "play reset play reset",
			scrub:false,
		});
	})
	
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
	<section class="our-team">
		<div class="content">
			<h2>{{ $t('aboutUs.ourTeam.Title') }}</h2>
		</div>
	</section>
	<section class="our-team-item bg1">
		<div class="content">
			<div class="text">
				<p>
					{{ $t('aboutUs.ourTeam.ProfWong') }}
					<a href="https://www.aidlab.hk/">
						{{ $t('aboutUs.ourTeam.ProfWongLink') }}
					</a>.
					{{ $t('aboutUs.ourTeam.ProfWongDesc') }}
				</p>
				<div class="bottom-text" ref="bottomText">
					<h4 class="name">{{ $t('aboutUs.ourTeam.ProfWongName') }}</h4>
					<h4 class="position">{{ $t('aboutUs.ourTeam.ProfWongPosition') }}</h4>
				</div>
			</div>
			<div class="img">
				<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/about_team_01-600x887.png" alt="">
			</div>
		</div>
	</section>
	<section class="our-team-item bg2">
		<div class="content">
			<div class="img">
				<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/about_team_02-600x887.png" alt="">
			</div>
			<div class="text">
				<p>
					{{ $t('aboutUs.ourTeam.MsWong') }}
				</p>
				<div class="bottom-text" ref="bottomText">
					<h4 class="name">{{ $t('aboutUs.ourTeam.MsWongName') }}</h4>
					<h4 class="position">{{ $t('aboutUs.ourTeam.MsWongPosition') }}</h4>
				</div>
			</div>
		</div>
	</section>
	<section class="our-team-item bg1">
		<div class="content">
			<div class="text">
				<p>
					{{ $t('aboutUs.ourTeam.DrZou') }}
				</p>
				<div class="bottom-text" ref="bottomText">
					<h4 class="name">{{ $t('aboutUs.ourTeam.DrZouName') }}</h4>
					<h4 class="position">{{ $t('aboutUs.ourTeam.DrZouPosition') }}</h4>
				</div>
			</div>
			<div class="img">
				<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/about_team_03-600x887.png" alt="">
			</div>
		</div>
	</section>
	<section class="our-team-item bg2">
		<div class="content">
			<div class="img">
				<img src="https://s3.ap-east-1.amazonaws.com/code-create.com.hk/2022/11/about_team_04-600x887.png" alt="">
			</div>
			<div class="text">
				<p>
					{{ $t('aboutUs.ourTeam.Giovanni') }}
				</p>
				<div class="bottom-text" ref="bottomText">
					<h4 class="name">{{ $t('aboutUs.ourTeam.GiovanniName') }}</h4>
					<h4 class="position">{{ $t('aboutUs.ourTeam.GiovanniPosition') }}</h4>
				</div>
			</div>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.our-team{
		width: 100%;
		background-color: #f9f9f9;
		> .content{
			margin: 0 auto;
			max-width: 730px;
			padding: 100px 0px 100px 0px;
			@media (max-width: 1000px) {
				padding: 60px 0px 60px 0px;
			}
			> h2{
				text-align: center;
				margin-bottom: 30px;
				color: #000000;
				font-size: 40px;
				font-weight: 600;
				letter-spacing: 1px;
				font-family: "Poppins", Sans-serif;
				@media (max-width: 1000px) {
					font-size: 28px;
					margin-bottom: 0;
				}
			}
		}
	}
	.our-team-item{
		width: 100%;
		@media (max-width: 1000px) {
			padding: 40px 20px;
		}
		&.bg1{
			background-color: #eeeeee;
			.img{
				text-align: right;
			}
		}
		&.bg2{
			background-color: #ffffff;
			.img{
				text-align: left;
			}
		}
		> .content{
			padding: 100px 0;
			max-width: 960px;
			margin: 0 auto;
			display: flex;
			@media (max-width: 1000px) {
				max-width: 330px;
				flex-direction: column-reverse;
				padding: 0;
			}
			> div{
				width: 50%;
				@media (max-width: 1000px) {
					width: 100%;
				}
			}
			> .text{
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				> p{
					font-family: "Poppins", Sans-serif;
					font-size: 16px;
					font-weight: 600;
					line-height: 1.6em;
					color: #000000;
					margin-bottom: 20px;
					@media (max-width: 1000px) {
						font-size: 12px;
					}
					> a{
						color: inherit;
						font-size: inherit;
						font-family: inherit;
						line-height: inherit;
						text-decoration: none;
					}
				}
				> .bottom-text{
					> .name{
						font-family: "Poppins", Sans-serif;
						font-size: 16px;
						font-weight: 600;
						color: #000000;
						line-height: 1;
						margin-bottom: 10px;
						@media (max-width: 1000px) {
							margin-bottom: 10px;
						}
					}
					> .position{
						font-family: "Poppins", Sans-serif;
						font-size: 16px;
						font-weight: 400;
						color: #000000;
						line-height: 1;
					}
				}

			}
			> .img{
				> img{
					width: 100%;
					height: 492px;
					object-fit: cover;
					max-width: 330px;
					@media (max-width: 1000px) {
						margin-bottom: 40px;
						width: 100%;
						height: auto;
						aspect-ratio: 165 / 244;
					}
				}
			}
		}
	}
</style>