记录一个前端景深效果的实现

参考教程：https://blog.csdn.net/aaaa_aaab/article/details/143949881
在上述教程的基础上有一些修改，并非是在banner上的应用：

---

展示

代码

1. ts

import type { CSSProperties } from 'vue'
const startX = ref(0);
const currentX = ref(0);
const cloudStyle1 = ref<CSSProperties>({
	// transition: 'transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)',  // 更平滑的过渡
	transition: 'transform 0.3s',
	transform: 'translate(0px, 0px)',
	width: '800px',
	position: 'absolute',
	bottom: '0',
	left: '0',
	zIndex: -1
});
const cloudStyle2 = ref<CSSProperties>({
	transition: 'transform 0.3s',
	transform: 'translate(0px, 0px)',
	width: '600px',
	position: 'absolute',
	bottom: '0',
	right: '0',
	zIndex: -1
});
const textStyle = ref<CSSProperties>({
	width: '2400px',
	position: 'absolute',
	bottom: '0',
	right: '0',
	zIndex: -1,
	transition: 'transform 0.1s',
	transform: 'translate(0px, 0px)',
});
const onMouseMove = (event: MouseEvent) => {
	currentX.value = event.clientX;
	const disx = currentX.value - startX.value;
	const move = disx / 72;//设定图片应该移动的距离,一个向前两个向后
	const move1 = -disx / 36;
	const move2 = -disx / 36;
	cloudStyle1.value.transform = `translate(${move1}px, 0px)`;
	cloudStyle2.value.transform = `translate(${move2}px, 0px)`;
	textStyle.value.transform = `translate(${move}px, 0px)`;
};

2. html

<div class="graph-layer">
	<!-- :style="textStyle" -->
	<div :class="['graph', { dark: props.isDarkMode }]" @mousemove="onMouseMove" > 
		<img :src="news_jpg" alt="Background" :style="textStyle">
		<img src="@/assets/imgs/cloud-3-2.png" alt="Background" :style="cloudStyle1">
		<img src="@/assets/imgs/cloud-3-3.png" alt="Background" :style="cloudStyle2">
		<span :class="['graphTitle', { dark: props.isDarkMode }]" >
			Keywords
		</span>
		<div id="wcchartdiv"></div>
		<div class="selectTool">
			<el-switch
			v-model="onyear"
			class="mb-2"
			active-text="Monthly"
			inactive-text="Annually"
			/>
		</div>
	</div>
</div>

3. css

.graph-layer {
	border-radius: 10px;
	overflow: hidden;
	margin: 2rem;
	border: 1px solid #e4e7ed;
	.graph{
		overflow: hidden;  /* 隐藏超出的部分 */
		position: relative;  
		z-index: 1;
		.graphTitle{
			display: flex;
			justify-content: center; /* 水平居中对齐 */
			font-size: 1.3rem;
			font-weight: bold;
			color: #23262c;
			padding: 10px;
			z-index: 2;  /* Set a higher z-index for the text to stay above the background */
			&.dark {
				color: #c7ceff;
			}
		}
		.selectTool{
			// margin: 1rem;
			padding: 1rem;
			:deep(.el-switch__label) {
				color: #a1a1a1;
			}
		}
	}
}