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.........完整代码请登录后点击上方下载按钮下载查看