js滚动视库差插件
1.开篇
- 在浏览一些如oppo华为等宣传手机的网站时,被网站的效果震撼到了,直到近期听课时才发现这网站运用的就是,bootstrap,ScrollMagic和Velocity动画,GSAP动画结合起来做的,可以实现非常炫酷的效果.其中随着网页滚动而做的动画是通过GSAP来做,而只要滚动到一定的位置就会执行的动画就是通过Velocity来做的.
2. GSAP
2.1 GSAP基础
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-GSAP开篇</title> <script src="js/TweenMax.js"></script> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div class="box"></div> <script> /* 1.什么是ScrollMagic? ScrollMagic是一个滚动视差插件 ScrollMagic本身比较简单，只包含2个类： crollMagic.Controller 一个控制器类，用于总体的调度 ； ScrollMagic.Scene 一个场景类，用于设计具体的变换。 需要注意的是，它本身并没有集成 animation的控制方法，动画的实现，需要引入插件 GSAP 或者是 Velocity * */ /* 1.什么是GSAP? GSAP(GreenSock Animation Platform)是一个从flash时代一直发展到今天的专业动画库 2.GSAP优点 1、速度快。GSAP专门优化了动画性能，使之实现和CSS一样的高性能动画效果。 2、轻量与模块化。模块化与插件式的结构保持了核心引擎的轻量，TweenLite包非常小（基本上低于7kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的动画模块，你可以按需使用。 3、没有依赖。 4、灵活控制。不用受限于线性序列，可以重叠动画序列，你可以通过精确时间控制，灵活地使用最少的代码实现动画。 3.GSAP版本 GSAP提供4个库文件供用户使用 1.TweenLite：这是GSAP动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。 2.TimelineLite：一个强大的，轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。 3.TimelineMax：扩展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如repeat，repeatDelay，yoyo，currentLabel()等。TimelineMax的目标是成为最终的全功能工具，而不是轻量级的。 4.TweenMax：可以完成TimelineLite做的每一件事，并附加非必要的功能，如repeat，yoyo，repeatDelay(重复延迟)等。它也包括许多常见的插件，如CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。 >>建议在开发中使用TweenMax这个全功能的js文件，它包括了GreenSock动画平台的所有核心的功能。 官网地址：http://www.greensock.com/ github地址：https://github.com/greensock/GreenSock-JS/ 中文网: https://www.tweenmax.com.cn/ * */ // 1.创建TweenMax对象 /* 第一个参数: 需要执行动画的元素 第二个参数: 动画执行的时长 第三个参数: 具体执行动画的属性 * */ // new TweenMax(".box", 3, {x: 500}); // 2.利用静态方法执行动画 // 从当前位置到指定位置 // TweenMax.to(".box", 3, {x: 500}); // 从指定位置到当前位置 // TweenMax.from(".box", 3, {x: 500}); // 从第一个指定的位置到第二个指定的位置 TweenMax.fromTo(".box", 3, {x: 500}, {x: 200}); </script> </body> </html>
2.2 GSAP交叉动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-GSAP交叉动画</title> <script src="js/TweenMax.js"></script> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; } .box2{ background: blue; } .box3{ background: green; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <script> //以下会在执行完一个以后执行另一个 TweenMax.staggerTo([".box1", ".box2", ".box3"], 3, {x: 500}, 3); // TweenMax.staggerFrom([".box1", ".box2", ".box3"], 3, {x: 500}, 3); //TweenMax.staggerFromTo([".box1", ".box2", ".box3"], 3, {x: 500}, {x: 200}, 3); </script> </body> </html>
2.3 GASP动画属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03-GSAP动画属性</title> <script src="js/TweenMax.js"></script> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div class="box"></div> <script> new TweenMax(".box", 3, { // 设置动画开始之前的延迟时间 // delay: 2, // 设置动画初识值 startAt: { x: 100 }, // 设置动画结束值 css: { x: 500, }, // 设置动画重复执行的次数 // 无限重复 -1 repeat: 2, // 设置动画重复执行的往返动画 yoyo: true, // 设置重复动画开始之前的延迟时间 repeatDelay: 3, // 设置动画执行的节奏 ease: Bounce.easeOut, yoyoEase: Bounce.easeOut }); </script> </body> </html>
2.4 GSAP循环动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04-GSAP循环动画</title> <style> *{ margin: 0; padding: 0; } div{ display: inline-block; width: 50px; height: 50px; background: #ccc; border: 1px solid #000; border-radius: 10px; } </style> <script src="js/TweenMax.js"></script> </head> <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <script> let oDivs = document.querySelectorAll(".box"); //进行以下操作就会将上面的盒子依次改变高度和颜色 TweenMax.staggerTo(oDivs, 3, { cycle: { height: [100, 150, 200], backgroundColor: ["red", "green", "blue"] } }, 3); </script> </body> </html>
2.5 GSAP动画常用事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-GSAP动画常用事件</title> <script src="js/TweenMax.js"></script> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div class="box"></div> <script> let obj = {name: "lnj"}; TweenMax.to(".box", 3, { x: 500, delay: 3, onStart:function(a, b, c){ // console.log("动画开始了", a, b, c); console.log(this); }, onStartParams:["123", "456", "789"], onStartScope: obj, }); </script> </body> </html>
2.6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06-GSAP动画常用方法</title> <script src="js/TweenMax.js"></script> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div class="box"></div> <button class="start">开始</button> <button class="paused">暂停</button> <button class="toggle">切换</button> <button class="restart">重新开始</button> <script> let tm = TweenMax.to(".box", 3, { x: 500, paused: true }); // console.log(tm); let oStartBtn = document.querySelector(".start"); oStartBtn.onclick = function () { tm.play(); } let oPauseBtn = document.querySelector(".paused"); oPauseBtn.onclick = function () { tm.pause(); } let oToggleBtn = document.querySelector(".toggle"); oToggleBtn.onclick = function () { // tm.paused(true); // tm.paused(false); // console.log(tm.paused()); tm.paused(!tm.paused()); } let oRestartBtn = document.querySelector(".restart"); oRestartBtn.onclick = function () { tm.restart(); } </script> </body> </html>
2.7 GSAP动画管理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-GSAP动画管理</title> <script src="js/TweenMax.js"></script> <!--<script src="js/TimelineMax.js"></script>--> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: #ccc; border: 1px solid #000; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <script> /* TweenMax.staggerTo([".box1", ".box2", ".box3"], 3, { x: 500 }, 3); */ /* TweenMax.to(".box1", 4, { x: 500 }); TweenMax.to(".box2", 3, { x: 400, delay:4 }); TweenMax.to(".box3", 3, { x: 300, delay:7 }); */ //通过add方法可以方便的让动画一个一个的依次进行不同的动画,经常会用到 let tm = new TimelineMax(); tm.add( TweenMax.to(".box1", 4, { x: 500 }) ); tm.add( TweenMax.to(".box2", 3, { x: 400 }) ); tm.add( TweenMax.to(".box3", 3, { x: 300 }) ); </script> </body> </html>
3.Velocity
3.1 开篇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08-Velocity开篇</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; } </style> <script src="js/jquery-3.1.1.js"></script> <script src="js/velocity.js"></script> </head> <body> <div class="box"></div> <script> /* 1.什么是Velocity? Velocity 是一个简单易用、性能极高、功能丰富的轻量级JS动画库。 它能和 jQuery/Zepto 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能 官方地址: https://github.com/julianshapiro/velocity 中文文档: http://shouce.jb51.net/velocity/index.html 2.GSAP基本使用 1.1导入Velocity文件 1.2利用Velocity实现动画 * */ // 1.单独使用 /* let oDiv = document.querySelector(".box"); Velocity(oDiv, { height: "300px" }, { duration: 3000 }); */ // 2.配合jQuery使用 // 注意点: 必须先导入jQuery, 再导入velocity $(".box").velocity({ height: "300px" }, { duration: 3000 }); </script> </body> </html>
3.2 Velocity常用配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09-Velocity常用配置</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; } </style> <script src="js/jquery-3.1.1.js"></script> <script src="js/velocity.js"></script> </head> <body> <div class="box"></div> <script> $(".box").velocity({ marginLeft: "500px" }, { duration: 3000, // 设置动画开始之前的延迟时间 // delay: 2000, // 设置动画循环的次数 // 注意点: 从初始位置到指定位置再到初始的位置算一次 // loop: 2, // 设置动画运动的节奏 // easing: "easeInOutQuint", // 设置动画结束之后元素的状态 // display: "none", // visibility: "hidden" // 设置动画队列 // 注意点: 只要设置了动画队列动画就不会自动执行 queue: "a" }); $(".box").velocity({ marginTop: "500px" }, { duration: 3000, queue: "b" }); $(".box").dequeue("a"); //比如把下面注释掉后就不会执行队列中为b的 /*setTimeout(function () { $(".box").dequeue("b"); }, 3000)*/ </script> </body> </html>
3.3 常用事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10-Velocity常用事件</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; } </style> <script src="js/jquery-3.1.1.js"></script> <script src="js/velocity.js"></script> </head> <body> <div class="box"></div> <script> $(".box").velocity({ marginLeft: "500px" }, { duration: 3000, delay: 2000, begin: function(elements) { console.log("动画开始了", elements); }, complete: function(elements) { console.log("动画结束了", elements); }, /* elements：当前执行动画的元素，可以用$(elements)来获取 complete：整个动画过程执行到百分之多少，该值是递增的，注意：该值为一个十进制数值 并不带单位 (%) remaining：整个动画过程还剩下多少毫秒，该值是递减的 start：动画开始时的绝对时间 (Unix time) tweenValue：动画执行过程中 两个动画属性之间的补间值 * */ progress: function(elements, complete, remaining, start, tweenValue) { // console.log("动画正在执行"); console.log((complete * 100) + "%"); } }); </script> </body> </html>
4.ScrollMagic开篇
4.1 开篇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>11-ScrollMagic开篇</title> <script src="js/ScrollMagic.js"></script> <style> *{ margin: 0; padding: 0; } header{ width: 100%; height: 100px; background: #000; } div{ width: 100%; height: 200px; } .section1{ background: red; } .section2{ background: green; } .section3{ background: blue; } .section4{ background: deeppink; } footer{ width: 100%; height: 2000px; background: #000; } </style> </head> <body> <header></header> <div class="section1"></div> <div class="section2"></div> <div class="section3"></div> <div class="section4"></div> <footer></footer> <script> /* 1.什么是ScrollMagic? ScrollMagic是一个神奇的滚动效果的插件. 如果你想在特定的滚动位置开始一个动画，并且让动画同步滚动条的动作， 或者把元素粘在一个特定的滚动位置，那么这款插件正是你需要的。 使用 ScrollMagic，你可以很容易地让动画和滚动条的动作同步。 使用 ScrollMagic，你可以很容易地把视差效果添加到您的网站中。 2.ScrollMagic特点: 优化性能 **轻量级（压缩后只有6KB） 灵活可扩展 **兼容移动设备 强大的事件管理 **支持响应式网页设计 面向对象的编程方式和链式编程方式 代码可读性强 支持两个方向的滚动（even different on one page） 支持在div容器中滚动（一个页面可以支持多个div） 完善的调试和日志记录功能 3.官网地址: http://ScrollMagic.io https://github.com/janpaepke/ScrollMagic 官方文档: http://scrollmagic.io/docs/index.html * */ // 1.创建一个控制器对象 let controller = new ScrollMagic.Controller(); // 2.创建一个场景对象 let scene = new ScrollMagic.Scene({ // 告诉ScrollMagic从什么位置开始当前的场景 // offset: 100, offset: 0, // 告诉ScrollMagic当前的场景的有效范围 duration: 200 }); // 告诉ScrollMagic哪一个元素需要固定 scene.setPin(".section1"); // 3.将场景对象添加到控制器对象 controller.addScene(scene); </script> </body> </html>
4.2 ScrollMagic场景配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12-ScrollMagic场景配置</title> <script src="js/ScrollMagic.js"></script> </head> <body> <header></header> <div class="section1"></div> <div class="section2"></div> <div class="section3"></div> <div class="section4"></div> <footer></footer> <script> //布局如上 // 官方文档: http://scrollmagic.io/docs/index.html // 1.创建一个控制器对象controller let controller = new ScrollMagic.Controller(); // 2.创建一个场景对象scene let scene = new ScrollMagic.Scene({ offset: 0, // 告诉ScrollMagic当前的场景从哪一个元素开始 // triggerElement: "footer", // triggerElement: ".section3", triggerElement: "header", // 告诉ScrollMagic当前的场景从指定元素相对于视口的什么位置开始 // triggerHook: "onEnter", 刚进来 // triggerHook: "onCenter", 进来一半的位置 triggerHook: "onLeave", //刚离开 duration: 200, //往上的时候会不会复位 reverse: false, }); // 告诉ScrollMagic哪一个元素需要固定 // scene.setPin(".section1", {pushFollowers: false}); scene.setPin(".section1"); // 3.将场景对象添加到控制器对象 controller.addScene(scene); </script> </body> </html>
4.3 ScrollMagic-GSAP动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>13-ScrollMagic-GSAP动画</title> <style> *{ margin: 0; padding: 0; } header{ width: 100%; height: 100px; background: #000; } div{ width: 100%; height: 200px; } .section1{ background: red; } .section2{ background: green; } .section3{ background: blue; } .section4{ background: deeppink; } footer{ width: 100%; height: 2000px; background: #000; } p{ width: 100px; height: 100px; background: purple; margin: 0 auto; } </style> <script src="js/ScrollMagic.js"></script> <script src="js/TweenMax.js"></script> <script src="js/animation.gsap.js"></script> </head> <body> <header></header> <div class="section1"> <p class="anim"></p> </div> <div class="section2"></div> <div class="section3"></div> <div class="section4"></div> <footer></footer> <script> // 1.创建一个控制器对象controller let controller = new ScrollMagic.Controller(); // 2.创建一个场景对象scene let scene = new ScrollMagic.Scene({ offset: 100, duration: 200, }); // 告诉ScrollMagic哪一个元素需要固定,pushFollowers: false就是不显示预留的空间 scene.setPin(".section1", {pushFollowers: false}); /* // 创建一个GSAP动画 let tm = TweenMax.to(".anim", 3, { width: 200, height: 200 }); scene.setTween(tm); */ /*如果创建一个上面说的依次执行的动画 let tm = new TimelineMax(); tm.add([ new TweenMax(".middle-left", 1, { transform: "translateX(-100%)", opacity: 0 }), new TweenMax(".middle-right", 1, { transform: "translateX(100%)", opacity: 0 }), new TweenMax(".middle-text", 1, { opacity: 1, delay:0.4 }), ]); tm.add(new TweenMax(".middle-phone", 1, { opacity: 1, })); scene.setTween(tm); */ scene.setTween(".anim", 3, { width: 200, height: 200 }); // 3.将场景对象添加到控制器对象 controller.addScene(scene); </script> </body> </html>
4.4 ScrollMagic-Velocity动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-ScrollMagic-Velocity动画</title> <style> //同上 </style> <script src="js/ScrollMagic.js"></script> <script src="js/velocity.js"></script> <script src="js/animation.velocity.js"></script> </head> <body> <header></header> <div class="section1"> <p class="anim"></p> </div> <div class="section2"></div> <div class="section3"></div> <div class="section4"></div> <footer></footer> <script> // 1.创建一个控制器对象controller let controller = new ScrollMagic.Controller(); // 2.创建一个场景对象scene let scene = new ScrollMagic.Scene({ offset: 100, // 注意点: 如果需要结合Velocity来使用, 那么在创建场景的时候就不能指定有效范围 // duration: 200, }); // 告诉ScrollMagic哪一个元素需要固定 scene.setPin(".section1"); scene.setVelocity(".anim", { width: "200px", height: "200px" }, { duration: 3000 }); // 3.将场景对象添加到控制器对象 controller.addScene(scene); </script> </body> </html>
4.5 ScrollMagic事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15-ScrollMagic事件</title> <style> //同上 </style> <script src="js/ScrollMagic.js"></script> <script src="js/velocity.js"></script> <script src="js/animation.velocity.js"></script> </head> <body> <header></header> <div class="section1"></div> <div class="section2"></div> <div class="section3"></div> <div class="section4"></div> <footer></footer> <script> // 1.创建一个控制器对象controller let controller = new ScrollMagic.Controller(); // 2.创建一个场景对象scene let scene = new ScrollMagic.Scene({ offset: 100, duration: 200, }); // 告诉ScrollMagic哪一个元素需要固定 scene.setPin(".section1"); scene.on("start", function (event) { console.log("进入场景"); }); scene.on("end", function (event) { console.log("离开场景"); }); scene.on("progress", function (event) { console.log("场景执行过程中" + event.progress); }); // 3.将场景对象添加到控制器对象 controller.addScene(scene); </script> </body> </html>
