Loading... ## 前言   现在很多网站进行页面浏览的时候，都会有很多页面动画，很多动画都是基于脚本实现的。在S1阶段的网页设计项目中，很多同学也想实现类似的效果，但是我们在S1阶段并不会接触脚本，所以这一篇文章就是让你的页面具备较好的动画体验。 ## gsap动画框架   访问[gsap官方网站](https://greensock.com/gsap/)，下载需要的js文件：[gasp.min.js](https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js)，也可以在页面中直接使用cdn在线脚本： `<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>` ## gsap动画框架上手初体验   创建HTML项目，将gsap文件导入至项目中，项目框架结构如下所示：    html页面创建成功后，现在我们需要将脚本文件加载至网页中，并创建div元素，设定固定宽度与高度，代码如下所示： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>gsap.js演示</title> <style type="text/css"> .demo { width: 100px; height: 100px; background-color: #29a2ff; } </style> </head> <body> <!-- 动画 --> <div class="demo"></div> <!-- 导入脚本文件 --> <script src="js/gsap.min.js" type="text/javascript"></script> <!--自定义脚本，此脚本需要写在导入脚本文件之后--> <script type="text/javascript"> //执行动画 gsap.to(".demo", 5, { x: 300, y: 300, backgroundColor: "#dd6942", opacity: 1 }); </script> </body> </html> ```   以上代码实现效果如下：  语法解释：`gsap.to("选择器", 动画执行时间（单位s）, {CSS属性名称:属性值,CSS属性名称:"属性值"});` 注意：   Gsap控制参数中支持绝大部分css样式，例如：`background-color`，需要注意的是在原有的css样式属性中的"-"在gsap中需要删除并且横杠后的第一个字母需要大写。例如：`background-color`需要写成`backgroundColor`   数值类型的属性值可以直接写，如果是字符串类型的属性值需要使用双引号或单引号包住。 ## 动画进阶-gsap动画绑定滚动条与用户实现交互动画   如需与滚动条进行交互，请访问[Scrolltrigger插件](https://greensock.com/scrolltrigger/)，下载需要的js文件：[ScrollTrigger.min.js](https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js)，也可以在页面中直接使用cdn在线脚本： `<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>` 注意，`ScrollTrigger.min.js`脚本插件的导入必须写在`gasp.min.js`之后！ 演示案例如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>gsap.js演示</title> <style type="text/css"> /* 给body的高度设定为：5000px，使得滚轮有滑动空间 */ body { height: 6000px; } .demo { /* 让div元素的上边距为500px */ margin-top: 500px; /* 元素默认隐藏 */ opacity: 0; width: 100px; height: 100px; background-color: #29a2ff; } </style> </head> <body> <!-- 动画 --> <div class="demo"></div> <!-- 导入脚本文件 --> <script src="js/gsap.min.js" type="text/javascript"></script> <!-- 导入滚动条交互插件 --> <script src="js/ScrollTrigger.min.js" type="text/javascript" charset="utf-8"></script> <!-- 自定义脚本，此脚本需要写在导入脚本文件之后 --> <script type="text/javascript"> // 注册插件 gsap.registerPlugin(ScrollTrigger); //制作触发时间线 let demo = gsap.timeline({ scrollTrigger: { trigger: ".demo", /* * ⚠ start: 表示动画开始执行节点 * ⚠ end: 表示动画执行结束 * 参数1: 表示当前这个元素的开始执行动画的起点 * 【0：就是当前这个元素的顶端位置】 * 【正数：当前这个元素根据顶端位置进行向下偏移】 * 【负数：当前这个元素根据顶端位置进行向上偏移】 * * 参数2: 表示当前滚动条的起点执行位置 * 【0：浏览器最顶端】 * 【正数：向下偏移】 * 【负数：向上偏移】 * 当两个位置重合时，动画开始执行/结束 * 此处的位置可以使用像素单位，完全可以自定义 */ start: '0% 60%', end: '100% 10%', markers: true, //绘制开始位置和结束位置的线条 scrub: true, //表示动画可以重复执行改成false表示只执行一次 pin: true //动画执行期间，页面不进行滚动，动画执行结束后，页面恢复滚动 } }) // 时间点触发之后的操作 demo.to(".demo", 2, { x: 300, backgroundColor: "#dd6942", opacity: 1 }); </script> </body> </html> ```  代码运行效果：  演示案例2： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>gsap案例</title> <style> * { padding: 0; margin: 0; list-style: none; outline: none; text-decoration: none; } body { height: 5000px; padding-top: 200px; padding-left: 500px; } .box { width: 100px; height: 100px; background-color: #68c8c5; display: inline-block; } .box-2 { width: 100px; height: 100px; background-color: #f56117; display: inline-block; } </style> </head> <body> <div class="box"></div> <div class="box-2"></div> <script src="js/gsap.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/ScrollTrigger.min.js" type="text/javascript" charset="utf-8"></script> <script> gsap.registerPlugin(ScrollTrigger) const box = gsap.timeline({ scrollTrigger: { trigger: 'body', //以body为参照 start: '100px 15%', //body 100px的地方为开始位置 end: '700px 0%', markers: true, //绘制线条 scrub: true, pin: true, } }); box.to('.box', { x: -300, //向左平移300px width: 200, //宽度变成200px backgroundColor: '#f56117', //改变背景颜色 duration: 2, }) box.to('.box-2', { x: 300, width: 200, backgroundColor: '#68c8c5', duration: 2, }, "-=2") //-2表示该动画与上一个动画同时执行 </script> </body> </html> ``` 运行效果图：  完整演示代码下载： <div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div> > 欧阳宇同学供稿 > > 欧阳宇同学html设计项目站点：[仿苹果官网在线浏览](https://pro.jbea.cn/pro/2021/Apple/index.html) 最后修改：2022 年 01 月 03 日 © 允许规范转载 赞 5 都滑到这里了，不点赞再走！？
6 条评论
q
。。
·····
感谢分享
感谢分享技术
感谢分享