gsap实现文字动画效果02

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, html {
            height: 100%;
        }
        .allbox {
            display: flex;
            flex-direction: column; /* 设置为纵向排列 */
            height: 300%; /* 为了确保内容高度超过视口,可以设置一个足够高的值 */
            overflow-y: auto; /* 当内容溢出时显示垂直滚动条 */
        }
        .allbox > div {
            flex: 1; /* 让每个子元素占满可用空间 */
            border-top: 5px solid black;
            background-color: yellow;
        }
        .allbox > div:nth-child(2) {
            background-color: white; /* 将第二个子元素的背景颜色更改为白色 */
        }
        .module-five-box {
            width: 1329px;
            margin: auto;
            padding-top: 200px;
            padding-bottom: 200px;
            text-align: center;
            display: flex;
            flex-direction: column; /* 设置为纵向排列 */
            align-items: center;
            height: auto;
        }
        .module-five-text-01 {
            font-size: 44px;
            line-height: 51px;
            background: linear-gradient(to right, #28AADC, #214083);
            -webkit-background-clip: text; /* 添加-webkit-前缀以适应一些浏览器 */
            background-clip: text;
            color: transparent; /* 使文字变为透明,以显示渐变背景 */
            font-family: "Overpass-Regular";
            margin-top: 30px;
            flex: 1; /* 让每个子元素占满可用空间 */
            /* display: none; */
            visibility: hidden; /* 设置为隐藏 */
        }
        .module-five-text-02 {
            font-size: 114px;
            line-height: 152px;
            background: linear-gradient(to right, #28AADC, #214083);
            -webkit-background-clip: text; /* 添加-webkit-前缀以适应一些浏览器 */
            background-clip: text;
            color: transparent; /* 使文字变为透明,以显示渐变背景 */
            font-family: "Overpass-Black";
            margin-top: 30px;
            flex: 1; /* 让每个子元素占满可用空间 */
            /* display: none; */
            visibility: hidden; /* 设置为隐藏 */

        }
        .module-five-text-03 {
            font-size: 66px;
            line-height: 92px;
            background: linear-gradient(to right, #28AADC, #214083);
            -webkit-background-clip: text; /* 添加-webkit-前缀以适应一些浏览器 */
            background-clip: text;
            color: transparent; /* 使文字变为透明,以显示渐变背景 */
            font-family: "Overpass-Bold";
            margin-top: 30px;
            flex: 1; /* 让每个子元素占满可用空间 */
            /* display: none; */
            visibility: hidden; /* 设置为隐藏 */
        }
    style>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
head>
<body>
    <div class="allbox">
        <div>Content 1div>
        <div class="module-five-all-box">
            <div class="module-five-box">
                <div class="module-five-text-01" id="dhtext01">
                    We Aim to Create a 
                div>
                <div class="module-five-text-02" id="dhtext02">
                    MICRO-GENERATION
                div>
                <div class="module-five-text-03" id="dhtext03">
                    FUTURE
                div>
            div>
        div>
        <div>Content 3div>
    div>
    <script>
        // 创建一个加载脚本的函数
        function loadScript(url, callback){
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = url;
            script.onload = callback;
            document.head.appendChild(script);
        }
        
        // 依次加载 GSAP 和 ScrollTrigger
        loadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js", function(){
            console.log("GSAP loaded successfully!");
            
            // 在加载 GSAP 后再加载 ScrollTrigger
            loadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js", function(){
                console.log("ScrollTrigger loaded successfully!");
                var tl = gsap.timeline({
                    scrollTrigger: {
                        trigger: ".module-five-box",
                        start: "top bottom", // 触发点为容器的中心
                        end: "center center",
                        scrub: 1, // 平滑擦洗,根据滚动速度调整动画的进度
                    },
                });
                $(".module-five-text-01, .module-five-text-02, .module-five-text-03").each(function(index, element) {
                    tl.fromTo(
                        element,
                        { opacity: 0, y: -200, visibility: "hidden" }, // 初始设置为透明,上移50像素,隐藏
                        {
                            opacity: 1,
                            y: 0,
                            visibility: "visible", // 设置为可见
                            duration: 1,
                            ease: "power3.inOut",
                        },
                        // 0.8,// 每个文字的动画之间间隔0.8秒
                        ">0.1"
                    );
                });
            });
        });
        // 在这里可以使用 GSAP 和 ScrollTrigger 进行动画等操作
                // 学习进度第一步官网https://gsap.com/
                // 需要的动画模块创建动画
                /*
                duration:动画持续时间2秒
                y:轴正的就是向下移动200px
                ease: 动画效果
                (power0运动到目标位置,不会返回,也就是移动200px后在200px,像素的位置),
                (power1运动到目标位置,不会返回,也就是移动200px后在200px,像素的位置),
                (power2运动到目标位置,不会返回,也就是移动200px后在200px,像素的位置)
                (power3运动到目标位置,不会返回,也就是移动200px后在200px,像素的位置)
                (power4运动到目标位置,不会返回,也就是移动200px后在200px,像素的位置)
                区别我觉得就是运动速度的区别
                所有动画效果的网址https://gsap.com/docs/v3/Eases
                */
                /*
                //写相同的只会保留第二个
                 gsap.to("#dhtext01", {y: 200, duration: 2 ,ease: "sine" });
                 gsap.to("#dhtext01", {y: -200, duration: 2 ,ease: "sine" });
                 //其他添加动画的方法
                 学习进度第二步
                 gsap.from();配置和上面一样的先是,选择器,然后是option
                 //配置两个从什么到什么,正负是相对位置是从你当前的div的位置算的,html的坐标系不同比如top:100px;是向下100px
                 gsap.fromTo(".box", { opacity: 0 }, { opacity: 0.5, duration: 1 });
                 */
                //  gsap.fromTo("#dhtext01", {y: -200,ease: "sine" },{y: 0, duration: 2 ,ease: "sine" });
                //  gsap.fromTo("#dhtext02", {y: -200,ease: "sine" },{y: 0, duration: 2 ,ease: "sine" });
                //  gsap.fromTo("#dhtext03", {y: -200,ease: "sine" },{y: 0, duration: 2 ,ease: "sine" });
                /*
                创建时间线
                var tl = gsap.timeline();
                */
            //    debugger
            // var tl = gsap.timeline({
            //         scrollTrigger: {
            //         trigger: ".module-five-text-02",
            //         pin: true, // 激活时固定触发器元件
            //         start: "top top", // 当触发器的顶部碰到视窗的顶部时
            //         end: "+=500", // 滚动超过起始点500px后结束
            //         scrub: 1, // 平滑擦洗,需要1秒“赶上”滚动条
            //         snap: {
            //             snapTo: "labels", //捕捉到时间轴上最近的标签
            //             duration: { min: 0.2, max: 5 }, //快照动画至少0.2秒,但不超过3秒(由速度决定)
            //             delay: 0.2, //从最后一个滚动事件开始等待0.2秒,然后再进行捕捉
            //             ease: "power1.inOut", //快照动画的易用性(默认为“power3”)
            //             },
            //         },
            //     });
            //     tl.addLabel("start", 1)
            //       .fromTo("#dhtext01", {y: -200,ease: "sine",display:"block",},{y: 0, duration: 2 ,ease: "sine"},"start")
            //       .fromTo("#dhtext02", {y: -200,ease: "sine",display:"block", },{y: 0, duration: 2 ,ease: "sine"},"start+=2")
            //       .fromTo("#dhtext03", {y: -200,ease: "sine",display:"block",},{y: 0, duration: 2 ,ease: "sine"},"start+=4");
            //     tl.seek("start");
        script>
body>
html>


js+css实现监听鼠标滚动的文字动画效果

你可能感兴趣的:(css,html,gsap)