gsap文字动画效果03

2023-12-15 20:29:16
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .sticky-parallax {
            position: relative;
            height: 100vh;
        }

        .parallax-text-zoom-out-container {
            max-width: 100%;
            margin: auto;
            display: block;
            width: 100vw;
            height: 100vh;
        }

        .zoom-out-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 1;
            word-spacing: 0.2vw;
            /* color: #28aadc; */
            /* color:  #2475AF; */
            overflow: hidden;
            width: 1329px;
            padding-left: 10%;
            padding-right: 10%;
        }

        .zoom-out-text span {
            background: linear-gradient(to right, #28aadc, #214083);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

        .gradient {
            position: absolute;
            height: 100%;
            top: 50%;
            left: 50%;
            display: none;
        }

        .gradient-inner {
            position: relative;
            display: block;
            margin-top: -50%;
            margin-left: -50%;
            line-height: 1;
            word-spacing: 0.2vw;
            background-image: url("/sites/master/files/parallax-master/gradient_v_0.jpg");
            color: transparent;
            background-clip: text;
            background-repeat: no-repeat;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .zoom-out-text span,
        .gradient span {
            font-size: 66px;
            font-weight: bold;
            display: inline-block;
            margin-top: 30px;
        }

        .zoom-out-text span.solar200,
        .gradient span.solar200 {
            font-size: 114px;
        }

        @media (max-width: 767px) {
            .numbers-container {
                background-image: url(/sites/master/files/parallax-master/World-map-on-panels-mobile.jpg);
            }

            .numbers-container h2 {
                margin-bottom: 0;
            }

            .numbers-wrapper-container {
                flex-direction: column;
            }

            .numbers-wrapper {
                border-bottom-width: 1px;
                border-right-width: 0;
                padding-right: 0;
                padding-left: 0;
                border-bottom-style: solid;
                border-right-style: none;
                width: 100%;
            }

            .numbers-wrapper:last-child {
                border-bottom-width: 0;
            }
        }

        @media only screen and (max-width: 1600px) {

            .zoom-out-text span,
            .gradient span {
                font-size: 86px;
            }

            .zoom-out-text span.solar200,
            .gradient span.solar200 {
                font-size: 190px;
            }
        }

        @media only screen and (max-width: 1023px) {
            .numbers-wrapper h4 {
                font-size: 1rem;
            }

            .zoom-out-text,
            .gradient {
                padding-left: 0;
                padding-right: 0;
            }
        }

        @media only screen and (max-width: 768px) {

            .zoom-out-text span,
            .gradient span {
                font-size: 68px;
            }

            .zoom-out-text span.solar200,
            .gradient span.solar200 {
                font-size: 150px;
            }
        }

        @media only screen and (max-width: 565px) {

            .zoom-out-text span,
            .gradient span {
                font-size: 42px;
            }

            .zoom-out-text span.solar200,
            .gradient span.solar200 {
                font-size: 92px;
            }
        }

        @media only screen and (max-width: 320px) {

            .zoom-out-text span,
            .gradient span {
                font-size: 13vw;
            }

            .zoom-out-text span.solar200,
            .gradient span.solar200 {
                font-size: 28vw;
            }
        }
    </style>
</head>

<body>
    <div class="pin-spacer" style="text-align: center;">
        <div class="sticky-parallax">
            <div class="parallax-text-zoom-out-container coh-style-inner-box-lrp-200 coh-container-boxed">
                <div class="zoom-out-text">
                    <span>We Aim</span> &nbsp;
                    <span>to Create a</span><br>
                    <span class="solar200">MICRO-GENERATION</span><br>
                    <span>FUTURE</span>
                </div>
                <div class="gradient" style="display: none;">
                    <div class="gradient-inner">
                        <span>We Aim</span> &nbsp;
                        <span>to Create a</span><br>
                        <span class="solar200">MICRO-GENERATION</span><br>
                        <span>FUTURE</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function loadScript(url, callback) {
            var script = document.createElement("script")
            script.type = "text/javascript";
            if (script.readyState) {
                script.onreadystatechange = function () {
                    if (script.readyState === "loaded" || script.readyState === "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {
                script.onload = function () {
                    callback();
                };
            }

            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }

        loadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js", function () {
            loadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js", function () {
                loadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/EasePack.min.js", function () {

                    gsap.registerPlugin(ScrollTrigger, EasePack);
                    ScrollTrigger.saveStyles(".container-hero div")
                    const tl = gsap.timeline({
                        scrollTrigger: {
                            scrub: 1,
                            trigger: ".sticky-parallax",
                            start: "top 40%",
                            end: "12000px",
                        },
                    });

                    var targets = document.querySelectorAll(".parallax-text-zoom-out-container .zoom-out-text span");
                    targets.forEach((target, index) => {
                        tl.from(target, 1, {
                            scale: 1.5,
                            opacity: 0,
                        }, index / 2)
                    })
                    ScrollTrigger.create({
                        trigger: ".sticky-parallax",
                        start: "top top",
                        end: "12000px",
                        pin: true,
                    })
                    function setMargin() {
                        let elZoomHeight = document.querySelector('.zoom-out-text').offsetHeight;
                        let elGradientHeight = document.querySelector('.gradient-inner').offsetHeight;
                        let maxHeight = Math.max(elZoomHeight, elGradientHeight);
                        if (maxHeight > 0) {
                            document.querySelector('.gradient-inner').style = "margin-top:calc(-" + maxHeight + "px / 2)";
                        }
                    }
                    setMargin();
                    // window.addEventListener("load", setMargin);
                    window.addEventListener("resize", setMargin);
                });
            });
        });
    </script>
</body>

</html>

在这里插入图片描述

文章来源:https://blog.csdn.net/qq_45026664/article/details/135018921
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。