2019.11.01 JS中滚动视差插件

GSAP动画库

TweenMax使用

//创建一个新对象，设置div在水平方向移动500px,动画执行时间为3s
new TweenMax(".box", 3, {x: 500});
TweenMax.to(".box", 3, {x: 500});
//div执行动画从水平位置500px开始
TweenMax.from(".box", 3, {x: 500});
//div执行动画从水平位置500px到200px
TweenMax.fromTo(".box", 3, {x: 500}, {x: 200});

GSAP交叉动画

//三个div在水平方向移动500px，动画执行时间为3s,延迟时间为3s
TweenMax.staggerTo([".box1", ".box2", ".box3"], 3, {x: 500}, 3);
TweenMax.staggerFrom([".box1", ".box2"], 3, {x: 500}, 5);
TweenMax.staggerFromTo([".box1", ".box3"], 3, {x: 500}, {x: 100}, 5);

GSAP动画属性

new TweenMax(".box", 3, {
//动画一开始延迟时间
        delay: 3,
//div开始执行动画的值
        startAt: {
            x: 100
        },
//div结束动画的目标值
        css: {
            x: 500
        },
//动画重复次数
        repeat: 2,
//动画是否往返
        yoyo: true,
//重复动画时的延迟
        repeatDelay: 2,
//过渡效果
        ease: Bounce.easeOut,
//往返执行动画时的效果
        yoyoEase: Elastic,
    });

GSAP循环动画

 let oDivs = document.querySelectorAll(".box");
    TweenMax.staggerTo(oDivs, 3, {
        cycle: {
        //会依次执行三个height的动画为一个周期
            height: [100, 200, 300],
            backgroundColor: ["red", "green", "blue"]
        }
    }, 3);

GSAP动画方法

 let tm = TweenMax.to(".box", 3, {
        x: 500,
        //一开始就设置为停止
        paused: true
    });
    $(".start").click(function () {
    //执行动画
         tm.play();
    });
    $(".pause").click(function () {
    //动画暂停
         tm.pause();
    });
    $(".toggle").click(function () {
    //tm.paused()返回值为true和false
    //tm.paused(true) 暂停
    //tm.paused(false) 执行动画
        tm.paused(!tm.paused());
    });
    $(".reStart").click(function () {
    //回到起点重新开始执行动画
        tm.restart();
    });

velocity动画库

velocity使用

    //1.单独使用velocity
    let oBox = document.querySelector(".box");
    Velocity(oBox, {
        height: "300px"
    }, {
        duration: 3000
    });
    //2.结合jQuery使用
    $(".box").delay(1000).velocity({
        height: "300px"
    },{
        duration: 3000
    });

velocity的配置

$(".box").velocity({
       marginLeft: "300px"
   },{
       duration: 3000
   });
   setTimeout(function () {
       $(".box").velocity({
           marginTop: "300px"
       },{
           duration: 2000,
           //让div执行新的动画
           queue: false
       });
   }, 2000)

scrollMagic

scrollMagic是一个神奇的滚动效果的jQuery插件，在一个特定的滚动位置开始动画，同步滚动条的动画移动，容易网站添加一个视差效应，用户点击某滚动位置响应。单页面展示使用此插件是个不错的选择

scrollMagic的基本使用

//1.创建scrollMagic控制器对象
let controller = new ScrollMagic.Controller();
//2.创建scrollMagic场景对象
let scene = new ScrollMagic.Scene({
    //告诉scrollMagic从什么位置开始当前的场景
    offset: 0,
    //告诉scrollMagic当前场景的有效位置
    duration: 200
});
//告诉scrollMagic哪一个元素需要固定
//scene.setPin(".section1");
//section1滚动过去
//pushFollowers默认值为true，表示section1被推下
 scene.setPin(".section1", {pushFollowers: false});
//3.把场景对象添加到控制器对象中
controller.addScene(scene);