Code-Create/src/pages/about-us/mission.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
import { gsap, TweenMax, TweenLite } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useGlobalStore } from '@/stores/global'
const globalStore = useGlobalStore()
const windowWidth = computed(() => globalStore.state.windowWidth)
//const props = defineProps({
//})
//const emit = defineEmits([
//])
const imgItem1 = ref(null)
const imgItem2 = ref(null)
const imgItem3 = ref(null)
const imgItem4 = ref(null)
const imgBox = ref(null)
let data = reactive({
})
onMounted(()=>{
	if(windowWidth.value < 1000){
		return
	}
	let dom = document.querySelector('body')
	gsap.registerPlugin(ScrollTrigger);
	let tl1 = gsap.timeline();
	tl1.from(imgItem1.value,1, {y:'200px',opacity:0,ease:'power2.out'},0)
	tl1.from(imgItem2.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.2) 
	tl1.from(imgItem3.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.4)
	tl1.from(imgItem4.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.6)
	ScrollTrigger.create({
		trigger: imgBox.value, // 触发器元素
		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="mission">
		<div class="content">
			<h2>{{ $t('aboutUs.mission.Title') }}</h2>
			<p>{{ $t('aboutUs.mission.Desc') }}</p>
		</div>
	</section>
	<section class="mission-focus-area">
		<div class="content">
			<h2>{{ $t('aboutUs.mission.FocusArea') }}</h2>
			<div class="img-box" ref="imgBox">
				<div class="img-item" ref="imgItem1">
					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_01.png" alt="">
					<h2>{{ $t('aboutUs.mission.ElevateOperationEfficiency') }}</h2>
				</div>
				<div class="img-item" ref="imgItem2">
					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_02-1-600x888.png" alt="">
					<h2>{{ $t('aboutUs.mission.VerticalDesignPlatform') }}</h2>
				</div>
				<div class="img-item" ref="imgItem3">
					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_03-1-600x887.png" alt="">
					<h2>{{ $t('aboutUs.mission.Education') }}</h2>
				</div>
				<div class="img-item" ref="imgItem4">
					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_04-1-600x888.png" alt="">
					<h2>{{ $t('aboutUs.mission.Community') }}</h2>
				</div>
			</div>
		</div>
	</section>
</template>
<style lang="less" scoped>
	.mission{
		width: 100%;
		background-color: #eeeeee;
		> .content{
			margin: 0 auto;
			max-width: 730px;
			padding: 200px 0px 200px 0px;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			@media (max-width: 1000px) {
				max-width: 1000px;
				padding: 60px 20px 60px 20px;
			}
			> h2{
				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;
				}
			}
			> p{
				color: #555;
				font-size: 16px;
				@media (max-width: 1000px) {
					font-size: 12px;
				}
			}

		}
	}
	.mission-focus-area{
		width: 100%;
		background-color: #f9f9f9;
		> .content{
			max-width: 1440px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			@media (max-width: 1000px) {
				max-width: 1000px;
			}
			> h2{
				font-family: "Poppins", Sans-serif;
				font-size: 40px;
				font-weight: 600;
				letter-spacing: 1px;
				color: #000000;
				margin: 100px auto;
				@media (max-width: 1000px) {
					font-size: 28px;
					margin: 60px auto;
				}
			}
			> .img-box{
				padding: 10px;
				margin: 0 auto;
				margin-bottom: 20px;
				position: relative;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				@media (max-width: 1000px) {
					flex-wrap: wrap;
					max-width: 330px;
				}
				> .img-item{
					margin: 10px;
					// width: 1120px;
					width: 340px;
					height: 503px;
					position: relative;
					@media (max-width: 1000px) {
						width: 100%;
						aspect-ratio: 165 / 244;
					}
					> h2{
						font-family: "Poppins", Sans-serif;
						font-weight: 600;
						line-height: 1.3em;
						letter-spacing: 2px;
						color: #FFFFFF;
						width: 320px;
						position: absolute;
						bottom: 25%;
						text-align: center;
						left: 50%;
						transform: translateX(-50%);
					}
					> img{
						width: 100%;
					}
				}
			}
		}
	}
</style>