gsap实现滑动文字放大缩小效果

最新推荐文章于 2025-03-20 15:23:16 发布

qwerty843

最新推荐文章于 2025-03-20 15:23:16 发布

阅读量560

点赞数

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_60886119/article/details/132627518

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .section{
            height: 100vh;
            background: #6F7982;
        }
        .img{
            height: 100vh;
            background: #b16b2a;
        }
        .text-container {
            position: sticky;
            position: -webkit-sticky;
            top: 0px;
            height: calc(2 * 100vh);
            z-index: -1;
            margin-top: -100vh;
        }

        .section-desc{
            padding-top: calc(67px);
        }
        .section-desc .text-box {
            height: calc(100vh - calc(67px));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            font-size: 4.5rem;
            font-weight: 600;
            letter-spacing: 0px;
            line-height: 1.5;
        }

        .section-desc .text-box.content {
            background: linear-gradient(91.51deg, #ABB6C0 0.99%, #6F7982 51.29%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            text-align: center;
        }
        .opacity-0 {
            opacity: 0;
        }

    </style>
</head>
<body>
    <div>
        <div class="section"></div>
        <div class="img"></div>
        <div class=" text-container">
            <div class="section-cws section-desc" style="">
                <div class="inner-box">
                    <div class="text-box content" style="translate: none; rotate: none; scale: none; opacity: 0; transform: scale(0.5, 0.5);">
                        test test<br>test test test
                    </div>
                </div>
            </div>
        </div>
        <div class="section"></div>
    </div>
    <script>
        let part = "";
        part = gsap.timeline({
            scrollTrigger: {
                trigger: ".img",
                start: `bottom 60%`,
                end: `bottom 40%`,
                scrub: true,
                markets: true,
                onEnter: ({ progress, direction, isActive }) => {
                    $(".section-desc").removeClass("opacity-0");
                }
            }
        });
        part.fromTo(".section-desc .text-box", { scale: 0.5, opacity: 0 }, { scale: 1, opacity: 1 });
    </script>
</body>
</html>