gsap+ScrollTrigger实现鼠标滚动文字三维台阶贴面移动效果代码-html代码-BFW代码库

gsap+ScrollTrigger实现鼠标滚动文字三维台阶贴面移动效果代码

代码语言：html

代码描述：gsap+ScrollTrigger实现鼠标滚动文字三维台阶贴面移动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>

@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");


body { 
	background-color: #500472; 
	padding: 0; 
	height: 300vh; 
	display: flex; 
	align-items: flex-start; 
	justify-content: flex-start;

}

h1 {
	font-family: "Bandeins Sans & Strange Variable";
	font-size: 205px;
	font-variation-settings: "wdth" 400;
	color: #f78f82;
	margin: 0;
	padding: 0;
	line-height: 95px;
}

.container div {
	height: 150px;
	padding: 0;
	margin: 0;
	width: 100%;
	overflow: hidden;
	position: relative;
}


.scene {
  transform-style: preserve-3d;
	opacity: 0
}

.container {
	height: 150px;
	width: 600px;
	padding: 0;
	margin: 0;
	perspective 500px;
	overflow: hidden;
}

.container:nth-child(1) {
	transform: rotateX(-24deg) rotateY(-50deg) rotateX(90deg) translate3d(299px, 0.5px, 0) scaleY(1.71);
}
.container:nth-child(2) {
	transform: rotateX(-24deg) rotateY(-50deg) rotateX(0deg) translate3d(145px, 0, 0) scaleY(1);
}
.container:nth-child(3) {
	transform: rotateX(-24deg) rotateY(-50deg) rotateX(90deg) translate3d(-9px, -1.5px, 0) scaleY(1.7);
}
.container:nth-child(4) {
	transform: rotateX(-24deg) rotateY(-50deg) rotateX(0deg) translate3d(-163px, 0, -3px) scaleY(1);
}

.container:nth-child(even) {
	opacity: 0.8
}

/* SCROLL DOWN */
.scroll-down {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%, 0);
	color: white;
	font-weight: 400;
	font-size: 14px;
	overflow: visible;
}

.scroll-down .arrow {
	position: relative;
	top: 0px;
	margin: 0 auto;
	width: 15px;
	height: 15px;
	filter: invert(1);
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdG.........完整代码请登录后点击上方下载按钮下载查看