鼠標滾輪仿星球大戰文字幀動畫的實現

最近研究了一下利用鼠標滾輪控制文字幀動畫的效果，在此記錄一下實現過程。
不多說，先看一下效果圖：

滾動鼠標滾輪之後文字會漸漸顯示再漸漸消失，當菜單下的progressbar滿了的時候，就會觸發換頁動畫跳轉到“精彩壁紙”頁面

本項目採用的單頁模式，路由選用的jquery的crossroads路由，具體的路由設置我就不在此仔細介紹了，可以去我的git上查看源碼。我這裏主要講述這個鼠標滾動幀動畫的實現。
實現這個功能主要利用了ScrollMagic這個動畫插件，需要引入如下的js文件：

    <script src="vendor/ScrollMagic/TweenMax.min.js"></script>
    <script src="vendor/ScrollMagic/ScrollMagic.js"></script>
    <script src="vendor/ScrollMagic/animation.gsap.js"></script>
    <script src="vendor/ScrollMagic/debug.addIndicators.js"></script>

其中，ScrollMagic有一個機制是允許我們對一個div塊中的所有元素都設置一個動畫，然後分別的設置子動畫的延遲，但是這有一個問題就是，雖然每個子動畫的開始時間不同，但是最終的狀態的時間是同步的，但是我這個實現的是前一個文字在變化的時候，不影響後面的文字狀態，於是我就採用了針對所有的文字段單獨的做兩個幀動畫（一個用於顯示，一個用於隱藏），具體的設置代碼：

//設置星球大戰文字動畫
    function setStartScroll(){
    //指定scroll的對象，默認是body，但是我們這裏僅僅需要對文字框的部分設置動畫
        var controller = new ScrollMagic.Controller({container:"#wrapper-in"});
        if($("#p0").length == 0){
            $("#wrapper-in>div").children("p").map(function (index,dom) {
                // 設置文字框的ID
                dom.id = "p"+index;
                addAnimation(controller,dom.id);
            })
        }
    }

    //添加滑輪文字效果
    function addAnimation(controller,id){
        id = "#"+id;
        var textShow = TweenMax.staggerFromTo(id,0.5,
            {
                y:0,
                scale:1,
                opacity:0
            },
            {
                y:-30,
                scale:1,
                opacity:1
            },
            0.1)
        var sceneShow = new ScrollMagic.Scene({
            triggerElement:id,
            duration:250,
            offset: -250
        })
            .setTween(textShow)
            // .addIndicators()
            .addTo(controller);

        var textHide = TweenMax.staggerFromTo(id,0.5,
            {
                y:-30,
                scale:1,
                opacity:1
            },
            {
                y:-60,
                scale:1.5,
                opacity:0
            },
            0.1)
        var ceneHide = new ScrollMagic.Scene({
            triggerElement:id,
            duration:250,
            offset: 0
        })
            .setTween(textHide)
            //這個代碼可以在頁面上顯示動畫的起始位置與結束位置
            // .addIndicators()
            .addTo(controller);
    }

OK，利用了這個插件，這個功能就不難實現啦，具體的項目代碼可以通過下面的地址獲得。
https://github.com/ArlexDu/STARWAR-TEXT