中日一区二区,日本一区二区中出

js滾動(dòng)視庫差插件

1.開篇

在瀏覽一些如oppo華為等宣傳手機(jī)的網(wǎng)站時(shí),被網(wǎng)站的效果震撼到了,直到近期聽課時(shí)才發(fā)現(xiàn)這網(wǎng)站運(yùn)用的就是,bootstrap,ScrollMagic和Velocity動(dòng)畫,GSAP動(dòng)畫結(jié)合起來做的,可以實(shí)現(xiàn)非常炫酷的效果.其中隨著網(wǎng)頁滾動(dòng)而做的動(dòng)畫是通過GSAP來做,而只要滾動(dòng)到一定的位置就會(huì)執(zhí)行的動(dòng)畫就是通過Velocity來做的.

2. GSAP

2.1 GSAP基礎(chǔ)

<!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是一個(gè)滾動(dòng)視差插件
    ScrollMagic本身比較簡單，只包含2個(gè)類：
    crollMagic.Controller 一個(gè)控制器類，用于總體的調(diào)度 ；
    ScrollMagic.Scene 一個(gè)場景類，用于設(shè)計(jì)具體的變換。

    需要注意的是，它本身并沒有集成 animation的控制方法，動(dòng)畫的實(shí)現(xiàn)，需要引入插件 GSAP 或者是 Velocity
    * */
    /*
    1.什么是GSAP?
    GSAP(GreenSock Animation Platform)是一個(gè)從flash時(shí)代一直發(fā)展到今天的專業(yè)動(dòng)畫庫

    2.GSAP優(yōu)點(diǎn)
    1、速度快。GSAP專門優(yōu)化了動(dòng)畫性能，使之實(shí)現(xiàn)和CSS一樣的高性能動(dòng)畫效果。
    2、輕量與模塊化。模塊化與插件式的結(jié)構(gòu)保持了核心引擎的輕量，TweenLite包非常?。ɑ旧系陀?kb）。GSAP提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的動(dòng)畫模塊，你可以按需使用。
    3、沒有依賴。
    4、靈活控制。不用受限于線性序列，可以重疊動(dòng)畫序列，你可以通過精確時(shí)間控制，靈活地使用最少的代碼實(shí)現(xiàn)動(dòng)畫。

    3.GSAP版本
    GSAP提供4個(gè)庫文件供用戶使用
    1.TweenLite：這是GSAP動(dòng)畫平臺(tái)的核心部分，使用它可以用來實(shí)現(xiàn)大部分的動(dòng)畫效果，適合來實(shí)現(xiàn)一些元素的簡單動(dòng)畫效果。
    2.TimelineLite：一個(gè)強(qiáng)大的，輕量級(jí)的序列工具，它就如一個(gè)存放補(bǔ)間動(dòng)畫的容器，可以很容易的整體控制補(bǔ)間動(dòng)畫，且精確管理補(bǔ)間動(dòng)畫彼此之間的時(shí)間關(guān)系。比如動(dòng)畫的各種狀態(tài)，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它適合來實(shí)現(xiàn)一些復(fù)雜的動(dòng)畫效果。
    3.TimelineMax：擴(kuò)展TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如repeat，repeatDelay，yoyo，currentLabel()等。TimelineMax的目標(biāo)是成為最終的全功能工具，而不是輕量級(jí)的。
    4.TweenMax：可以完成TimelineLite做的每一件事，并附加非必要的功能，如repeat，yoyo，repeatDelay(重復(fù)延遲)等。它也包括許多常見的插件，如CSSPlugin，這樣您就不需自行載入多個(gè)文件。側(cè)重于全功能的，而不是輕量級(jí)的。
    >>建議在開發(fā)中使用TweenMax這個(gè)全功能的js文件，它包括了GreenSock動(dòng)畫平臺(tái)的所有核心的功能。

    官網(wǎng)地址：http://www.greensock.com/
    github地址：https://github.com/greensock/GreenSock-JS/
    中文網(wǎng): https://www.tweenmax.com.cn/
    * */
    // 1.創(chuàng)建TweenMax對象
    /*
    第一個(gè)參數(shù): 需要執(zhí)行動(dòng)畫的元素
    第二個(gè)參數(shù): 動(dòng)畫執(zhí)行的時(shí)長
    第三個(gè)參數(shù): 具體執(zhí)行動(dòng)畫的屬性
    * */
    // new TweenMax(".box", 3, {x: 500});
    // 2.利用靜態(tài)方法執(zhí)行動(dòng)畫
    // 從當(dāng)前位置到指定位置
    // TweenMax.to(".box", 3, {x: 500});
    // 從指定位置到當(dāng)前位置
    // TweenMax.from(".box", 3, {x: 500});
    // 從第一個(gè)指定的位置到第二個(gè)指定的位置
    TweenMax.fromTo(".box", 3, {x: 500}, {x: 200});
</script>
</body>
</html>

2.2 GSAP交叉動(dòng)畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-GSAP交叉動(dòng)畫</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>
    //以下會(huì)在執(zhí)行完一個(gè)以后執(zhí)行另一個(gè)
    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動(dòng)畫屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-GSAP動(dòng)畫屬性</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, {
        // 設(shè)置動(dòng)畫開始之前的延遲時(shí)間
        // delay: 2,
        // 設(shè)置動(dòng)畫初識(shí)值
        startAt: {
            x: 100
        },
        // 設(shè)置動(dòng)畫結(jié)束值
        css: {
            x: 500,
        },
        // 設(shè)置動(dòng)畫重復(fù)執(zhí)行的次數(shù)
        // 無限重復(fù) -1
        repeat: 2,
        // 設(shè)置動(dòng)畫重復(fù)執(zhí)行的往返動(dòng)畫
        yoyo: true,
        // 設(shè)置重復(fù)動(dòng)畫開始之前的延遲時(shí)間
        repeatDelay: 3,
        // 設(shè)置動(dòng)畫執(zhí)行的節(jié)奏
        ease: Bounce.easeOut,
        yoyoEase: Bounce.easeOut
    });
</script>
</body>
</html>

2.4 GSAP循環(huán)動(dòng)畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-GSAP循環(huán)動(dòng)畫</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");
    //進(jìn)行以下操作就會(huì)將上面的盒子依次改變高度和顏色
    TweenMax.staggerTo(oDivs, 3, {
        cycle: {
            height: [100, 150, 200],
            backgroundColor: ["red", "green", "blue"]
        }
    }, 3);
</script>
</body>
</html>

2.5 GSAP動(dòng)畫常用事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-GSAP動(dòng)畫常用事件</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("動(dòng)畫開始了", 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動(dòng)畫常用方法</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動(dòng)畫管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-GSAP動(dòng)畫管理</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方法可以方便的讓動(dòng)畫一個(gè)一個(gè)的依次進(jìn)行不同的動(dòng)畫,經(jīng)常會(huì)用到
    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 是一個(gè)簡單易用、性能極高、功能豐富的輕量級(jí)JS動(dòng)畫庫。
    它能和 jQuery/Zepto 完美協(xié)作，并和$.animate()有相同的 API， 但它不依賴 jQuery，可單獨(dú)使用。
    Velocity 不僅包含了 $.animate() 的全部功能， 還擁有：顏色動(dòng)畫、轉(zhuǎn)換動(dòng)畫(transforms)、循環(huán)、 緩動(dòng)、SVG 動(dòng)畫、和 滾動(dòng)動(dòng)畫 等特色功能

    官方地址: https://github.com/julianshapiro/velocity
    中文文檔: http://shouce.jb51.net/velocity/index.html

    2.GSAP基本使用
    1.1導(dǎo)入Velocity文件
    1.2利用Velocity實(shí)現(xiàn)動(dòng)畫
    * */
    // 1.單獨(dú)使用
    /*
    let oDiv = document.querySelector(".box");
    Velocity(oDiv, {
        height: "300px"
    }, {
        duration: 3000
    });
    */

    // 2.配合jQuery使用
    // 注意點(diǎn): 必須先導(dǎo)入jQuery, 再導(dǎo)入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,
        // 設(shè)置動(dòng)畫開始之前的延遲時(shí)間
        // delay: 2000,
        // 設(shè)置動(dòng)畫循環(huán)的次數(shù)
        // 注意點(diǎn): 從初始位置到指定位置再到初始的位置算一次
        // loop: 2,
        // 設(shè)置動(dòng)畫運(yùn)動(dòng)的節(jié)奏
        // easing: "easeInOutQuint",
        // 設(shè)置動(dòng)畫結(jié)束之后元素的狀態(tài)
        // display: "none",
        // visibility: "hidden"
        // 設(shè)置動(dòng)畫隊(duì)列
        // 注意點(diǎn): 只要設(shè)置了動(dòng)畫隊(duì)列動(dòng)畫就不會(huì)自動(dòng)執(zhí)行
        queue: "a"
    });

    $(".box").velocity({
        marginTop: "500px"
    }, {
        duration: 3000,
        queue: "b"
    });
    $(".box").dequeue("a");
    //比如把下面注釋掉后就不會(huì)執(zhí)行隊(duì)列中為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("動(dòng)畫開始了", elements);
        },
        complete: function(elements) {
            console.log("動(dòng)畫結(jié)束了", elements);
        },
        /*
        elements：當(dāng)前執(zhí)行動(dòng)畫的元素，可以用$(elements)來獲取
        complete：整個(gè)動(dòng)畫過程執(zhí)行到百分之多少，該值是遞增的，注意：該值為一個(gè)十進(jìn)制數(shù)值 并不帶單位 (%)
        remaining：整個(gè)動(dòng)畫過程還剩下多少毫秒，該值是遞減的
        start：動(dòng)畫開始時(shí)的絕對時(shí)間 (Unix time)
        tweenValue：動(dòng)畫執(zhí)行過程中 兩個(gè)動(dòng)畫屬性之間的補(bǔ)間值
        * */
        progress: function(elements, complete, remaining, start, tweenValue) {
            // console.log("動(dòng)畫正在執(zhí)行");
            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是一個(gè)神奇的滾動(dòng)效果的插件.
    如果你想在特定的滾動(dòng)位置開始一個(gè)動(dòng)畫，并且讓動(dòng)畫同步滾動(dòng)條的動(dòng)作，
    或者把元素粘在一個(gè)特定的滾動(dòng)位置，那么這款插件正是你需要的。
    使用 ScrollMagic，你可以很容易地讓動(dòng)畫和滾動(dòng)條的動(dòng)作同步。
　　使用 ScrollMagic，你可以很容易地把視差效果添加到您的網(wǎng)站中。

    2.ScrollMagic特點(diǎn):
    優(yōu)化性能
    **輕量級(jí)（壓縮后只有6KB）
    靈活可擴(kuò)展
    **兼容移動(dòng)設(shè)備
    強(qiáng)大的事件管理
    **支持響應(yīng)式網(wǎng)頁設(shè)計(jì)
    面向?qū)ο蟮木幊谭绞胶玩準(zhǔn)骄幊谭绞?    代碼可讀性強(qiáng)
    支持兩個(gè)方向的滾動(dòng)（even different on one page）
    支持在div容器中滾動(dòng)（一個(gè)頁面可以支持多個(gè)div）
    完善的調(diào)試和日志記錄功能

    3.官網(wǎng)地址: http://ScrollMagic.io
    https://github.com/janpaepke/ScrollMagic
      官方文檔: http://scrollmagic.io/docs/index.html
    * */
    // 1.創(chuàng)建一個(gè)控制器對象
    let controller = new ScrollMagic.Controller();
    // 2.創(chuàng)建一個(gè)場景對象
    let scene = new ScrollMagic.Scene({
        // 告訴ScrollMagic從什么位置開始當(dāng)前的場景
        // offset: 100,
        offset: 0,
        // 告訴ScrollMagic當(dāng)前的場景的有效范圍
        duration: 200
    });
    // 告訴ScrollMagic哪一個(gè)元素需要固定
    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.創(chuàng)建一個(gè)控制器對象controller
    let controller = new ScrollMagic.Controller();
    // 2.創(chuàng)建一個(gè)場景對象scene
    let scene = new ScrollMagic.Scene({
        offset: 0,
        // 告訴ScrollMagic當(dāng)前的場景從哪一個(gè)元素開始
        // triggerElement: "footer",
        // triggerElement: ".section3",
        triggerElement: "header",
        // 告訴ScrollMagic當(dāng)前的場景從指定元素相對于視口的什么位置開始
        // triggerHook: "onEnter", 剛進(jìn)來
        // triggerHook: "onCenter", 進(jìn)來一半的位置
        triggerHook: "onLeave",  //剛離開
        duration: 200,
        //往上的時(shí)候會(huì)不會(huì)復(fù)位
        reverse: false,
    });
    // 告訴ScrollMagic哪一個(gè)元素需要固定
    // scene.setPin(".section1", {pushFollowers: false});
    scene.setPin(".section1");
    // 3.將場景對象添加到控制器對象
    controller.addScene(scene);
</script>
</body>
</html>

4.3 ScrollMagic-GSAP動(dòng)畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-ScrollMagic-GSAP動(dòng)畫</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.創(chuàng)建一個(gè)控制器對象controller
    let controller = new ScrollMagic.Controller();
    // 2.創(chuàng)建一個(gè)場景對象scene
    let scene = new ScrollMagic.Scene({
        offset: 100,
        duration: 200,
    });
    // 告訴ScrollMagic哪一個(gè)元素需要固定,pushFollowers: false就是不顯示預(yù)留的空間
    scene.setPin(".section1", {pushFollowers: false});
    /*
    // 創(chuàng)建一個(gè)GSAP動(dòng)畫
    let tm = TweenMax.to(".anim", 3, {
        width: 200,
        height: 200
    });
    scene.setTween(tm);
    */
    /*如果創(chuàng)建一個(gè)上面說的依次執(zhí)行的動(dòng)畫
    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動(dòng)畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-ScrollMagic-Velocity動(dòng)畫</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.創(chuàng)建一個(gè)控制器對象controller
    let controller = new ScrollMagic.Controller();
    // 2.創(chuàng)建一個(gè)場景對象scene
    let scene = new ScrollMagic.Scene({
        offset: 100,
        // 注意點(diǎn): 如果需要結(jié)合Velocity來使用, 那么在創(chuàng)建場景的時(shí)候就不能指定有效范圍
        // duration: 200,
    });
    // 告訴ScrollMagic哪一個(gè)元素需要固定
    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.創(chuàng)建一個(gè)控制器對象controller
    let controller = new ScrollMagic.Controller();
    // 2.創(chuàng)建一個(gè)場景對象scene
    let scene = new ScrollMagic.Scene({
        offset: 100,
        duration: 200,
    });
    // 告訴ScrollMagic哪一個(gè)元素需要固定
    scene.setPin(".section1");
    scene.on("start", function (event) {
        console.log("進(jìn)入場景");
    });
    scene.on("end", function (event) {
        console.log("離開場景");
    });
    scene.on("progress", function (event) {
        console.log("場景執(zhí)行過程中" + event.progress);
    });
    // 3.將場景對象添加到控制器對象
    controller.addScene(scene);
</script>
</body>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

js滾動(dòng)視庫差插件0830

js滾動(dòng)視庫差插件0830

js滾動(dòng)視庫差插件

1.開篇

2. GSAP

2.1 GSAP基礎(chǔ)

2.2 GSAP交叉動(dòng)畫

2.3 GASP動(dòng)畫屬性

2.4 GSAP循環(huán)動(dòng)畫

2.5 GSAP動(dòng)畫常用事件

2.7 GSAP動(dòng)畫管理

3.Velocity

3.1 開篇

3.2 Velocity常用配置

3.3 常用事件

4.ScrollMagic開篇

4.1 開篇

4.2 ScrollMagic場景配置

4.3 ScrollMagic-GSAP動(dòng)畫

4.4 ScrollMagic-Velocity動(dòng)畫

4.5 ScrollMagic事件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

js滾動(dòng)視庫差插件0830

js滾動(dòng)視庫差插件

1.開篇

2. GSAP

2.1 GSAP基礎(chǔ)

2.2 GSAP交叉動(dòng)畫

2.3 GASP動(dòng)畫屬性

2.4 GSAP循環(huán)動(dòng)畫

2.5 GSAP動(dòng)畫常用事件

2.7 GSAP動(dòng)畫管理

3.Velocity

3.1 開篇

3.2 Velocity常用配置

3.3 常用事件

4.ScrollMagic開篇

4.1 開篇

4.2 ScrollMagic場景配置

4.3 ScrollMagic-GSAP動(dòng)畫

4.4 ScrollMagic-Velocity動(dòng)畫

4.5 ScrollMagic事件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av