gsap+ScrollTrigge鼠标滚动实现文字字母交错动画效果代码-html代码-BFW代码库

gsap+ScrollTrigge鼠标滚动实现文字字母交错动画效果代码

代码语言：html

代码描述：gsap+ScrollTrigge鼠标滚动实现文字字母交错动画效果代码

下面为部分代码预览，完整代码请点击下载或在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;
        	font-family: "Nunito", sans-serif;
        }
        
        h1 {
        
        	font-size: 300px;
        	font-variation-settings: "wdth" 400;
        	color: #f78f82;
        	line-height: 0;
        	padding: 0;
        	margin: 0;
        	text-align: center;
        	width: 100%;
        }
        
        
        .scene {
          transform-style: preserve-3d;
        	opacity: 0
        }
        
        .container {
        	height: 150px;
        	padding: 0;
        	margin: 0;
        	overflow: hidden;
        	perspective 500px;
        /* 	border: solid 0.001px white */
        }
        
        .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,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdm.........完整代码请登录后点击上方下载按钮下载查看