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