gsap 视差滚动

最新推荐文章于 2024-09-11 15:33:18 发布

自由的音符

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量203

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weCat_s/article/details/140990195

版权

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export function useGsapBackgroundAnimation(selectors: string, parallaxFactor: number = 0.5) {
	gsap.registerPlugin(ScrollTrigger);
	const sections = document.querySelectorAll(selectors);
	sections.forEach(selector => {
		const scrollDistance = (selector.clientHeight * parallaxFactor).toFixed(0);
		gsap.fromTo(
			selector,
			{
				backgroundPositionY: `-${scrollDistance}px`
			},
			{
				backgroundPositionY: `${scrollDistance}px`,
				ease: "none",
				scrollTrigger: {
					trigger: selector,
					scrub: 0.4 //把动画速度和滚动条速度同步
				}
			}
		);
	});
}

<script setup lang="ts">
const { t } = useI18n();
const {
	public: { masterDomain }
} = useRuntimeConfig();

useHead({
	titleTemplate: () => t("website.home.title") + " - 首页"
});
useSeoMeta({ ...useSeoTags({ url: masterDomain }) });

onMounted(() => {
	useGsapBackgroundAnimation(".home-page_part1");
	useGsapBackgroundAnimation(".home-page_part2", 0.05);
});
const backgroundSizeType = computed(() => {
	if (useAppStore().deviceType === 1) return "contain";
	return "contain";
});
</script>
<template>
	<div class="section-container home-page">
		<client-only />
		<div class="home-page_part1 bg-danger-1">
		//使用图片占位，可以在页面缩放时，保持原有图片的比例
			<img src="~/assets/images/group-photo.jpg" object-fit="cover" class="w-full invisible" alt="" srcset="" />
		</div>

		<div class="home-page_common bg-success-4">
			<h1>hi，look a title</h1>
		</div>
		<div class="home-page_part2">
			<img src="~/assets/images/group-photo.jpg" object-fit="cover" class="w-full invisible" alt="" srcset="" />
		</div>
		<div class="home-page_common bg-amber">
			<h1>so smooth though</h1>
		</div>
		<div class="home-page_common bg-white">
			<h1>nice right?</h1>
		</div>
	</div>
</template>

<style scoped lang="less">
.home-page {
	@apply flex flex-col h-full relative;

	&_common {
		@apply w-full p-4px;
		height: 100vh;
	}

	&_part1 {
		@apply w-full  relative;
		background: url("~/assets/images/group-photo.jpg") no-repeat;
		background-color: #2f3133;
		background-size: v-bind("backgroundSizeType");
		.dark {
			color: #fff;
			background-color: #000;
		}
	}
	&_part2 {
		background: url("~/assets/images/group-photo.jpg") no-repeat;
		background-size: v-bind("backgroundSizeType");
		@apply w-full  p-4px bg-black;
		will-change: transform;
	}
}
</style>