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