gsap实现文字动画效果02

最新推荐文章于 2024-01-31 21:56:38 发布
最新推荐文章于 2024-01-31 21:56:38 发布
阅读量491 收藏
点赞数
文章标签： css html gsap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45026664/article/details/134760477
版权 
<!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>Document</title>
    <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>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="allbox">
        <div>Content 1</div>
        <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 3</div>
    </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实现监听鼠标滚动的文字动画效果

♛暮辞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
gsap文字动画效果03
qq_45026664的博客
12-15 271
gasp实现文字动画效果
gsap.js字体动画js特效代码
ICode联盟
09-30 265
gsap.js字体动画特效代码。
three.js&gsap滚动交互网页实现 2-创建文字并添加离开动画
宏斌的博客
07-08 391
在线条的入场动画完成后将其加入，以免两次设置z轴在进入页面时滚动条有高度的情况下z轴位置冲突。这样下滑一个屏幕高度聚光灯的角度会增加到0.7 ，并且上滑会降到0.3。使用scrollTrigger的onUpdate回调函数设置值。设置线条group的z轴到170 超出屏幕 不可见。让聚光灯的角度随着下滑增大，展示完整的场景。最后将这个group向左移动到适当的位置。将创建的两组文字opacity设置为0。接下来设置文字和背景线条的动画。在聚光灯扩大角度是时候显示文本。文字的创建可参考之前的博客。
gsap 基本使用及各种效果
一个爱分享的码农，希望和大家互相交流、学习、进步、奔小康
12-02 1055
最近非常喜欢gsap这个框架，学习的一些笔记与大家分享，有什么不同意见或问题欢迎互相交流
GSAP动画库——如何高效写动画
m0_60157874的博客
08-07 3437
GSAP学习的总结笔记，包含一些高效制作动画的方法，和一些常用的API
GSAP动画库，探究苹果官网页面滚动动画是如何实现的
qq_34185872的博客
12-07 1467
每次浏览苹果官网时都在好奇，当我们向下滚动页面时一个个文字或图片总能缓缓浮现，往上滚动时又能慢慢收起来，这就究竟是如是实现的呢。在查阅一些资料时发现了Scrollmagic.js插件,该插件提供了灵活的滚动动画，可以自定义各种各样的效果，但是当我满怀信心的决定大干一场时，发现这个插件已经很久没有维护更新了，而且是基于jquery开发的，在引入vue3脚手架时并不适配，有感兴趣的小伙伴可以去看官网：http://scrollmagic.io/docs/index.html。
Gsap线条网格碎片动画特效
07-14
Gsap线条网格碎片动画特效是一款使用gsap css3制作的线条网格碎片化动画特效。
Gsap SVG气泡视差动画特效
07-31
Gsap SVG气泡视差动画特效是一款使用gsap svg制作渐变色的气泡，网页滚动气泡视差和摇摆文字动画效果。
GSAP动画绘制卡通地球特效特效代码
03-20
GSAP动画绘制卡通地球特效是一款使用GSAP动画绘制卡通地球太阳月球和星星制作地球白天和夜晚动画场景特效。
HTML5+GSAP实现的池塘场景动画效果源码.zip
11-03
HTML5+GSAP实现的池塘场景动画效果源码.zip
GSAP动画
02-16
GSAP动画
使用GSAP写出令人惊叹的动画！
Daniel900516的博客
01-23 1224
GSAP实现动画
gsap实现滑动文字放大缩小效果
weixin_60886119的博客
09-01 292
滑动滚动条时 当前元素的上一个元素底部到视口的中间位置的时候 当前元素根据滚动条滑动放大 相反方向则缩小
scrolltrigger页面滚动文字渐显
qq_40019058的博客
11-15 485
GSAP这个动画库非常强大，用户与页面的互动性更强，访问过程也就变得更有趣。
gsap.js的简单应用——页面加载文字弹出效果
幻日のヨハネ
09-13 3090
基础函数 先介绍两个 gsap 基础函数： // 将一个或多个元素 targets 在指定时间 second 内按一定的速率函数变化至某个指定的 options 状态 gsap.to(targets, second, options) targets ：元素节点或者选择器字符串（如 .className ） second ：动画执行秒数 options ：动画末状态的配置对象（所有可用选项详见 CSSPlugin ） 例： gsap.to(".box", 1, {rotation: 27, x:
前端小案例——走马灯（文字水平轮播, 附源码）
最新发布
前端小白一枚
01-31 2302
水平滚动的文本效果，可以通俗的来说也叫“走马灯”，这里博主用了两种方法实现。第一种是用gsap动画库完成的，这种方法更为简单也更为高效。第二种使用CSS动画完成的，这是一种常见的方式对于对gsap动画不熟悉的小伙伴，也可以参考这种方法。两种方式博主都提供了源码供大家参考学习。
来写一个gsap的视差滚动效果
m0_58235310的博客
01-13 623
gsap是一个很齐全的动画效果包。
网页动画效果实现0.1
qq_45026664的博客
08-10 88
*gsap.to()这个执行的动画，在动画的过程中，由初始的位置运动到目标的位置，结束的时候保持在，你动画设置的目标位置。简单的理解就是到哪gsap.from()这个执行的动画，在动画的过程中，由目标位置运动到初始的位置，结束的时候保持在，初始的位置。简单的理解就是从哪里来gsap.fromTo()这个执行的动画，在动画的过程中，由初始位置到达目标位置，结束的时候保持在，目标的位置。简单的理解就是从哪来到哪去举列说明tween这个就是gsap.to方法的返回值，
vue3使用gsap实现数字滚动效果
samate6666的博客
09-21 2984
1、首先需要定义一个初始值，默认可以为0 2、定义滚动方法，gsap有一个to方法，第一个参数为初始值，第二个参数接收最终值和动画时间 3、监听最终值的变化，如果最终值被修改，则再次执行滚动方法 4、渲染出初始值，为了防止出现小数点，可以使用toFixed() 5、定义props接收父组件传递过来的最终值
用GSAP实现烟花效果
05-11
使用GSAP（GreenSock Animation Platform）实现烟花效果需要一些基本的HTML、CSS和JS知识，以及对GSAP的了解。下面是一个基本的烟花效果实现步骤： 1. 创建HTML结构 首先，创建一个HTML文件并添加一个canvas元素，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值