Mouse wheel Imitation Star Wars text frame animation implementation

Recently studied the use of mouse wheel control text frame animation effect, here to record the implementation process.
Not much to say, first look at the effect diagram:

Scrolling the mouse wheel after the text will gradually disappear, and when the menu under the ProgressBar full, it will trigger a change of page animation jump to the "Best Wallpaper" page

This project uses the single-page mode, the routing of jquery Crossroads routing, specific routing settings I will not be here to carefully introduce, you can go to my git to view the source code. Here I mainly talk about the implementation of the mouse scrolling frame animation.
The implementation of this feature mainly utilizes the Scrollmagic animation plugin, the need to introduce the following JS file:

    <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>

The scrollmagic has a mechanism that allows us to animate all the elements in a div block and then set the delay of the sub-animation separately, but one problem is that although the start time of each sub-animation is different, the final state of the time is synchronized, But I realized that the previous text in the change of time, does not affect the text state behind, so I used for all the text segment alone do two frame animation (one for display, one for hiding), the specific settings code:

Set Star Wars text animation function Setstartscroll () {//Specify scroll object, default is body, but here we just need to animate the part of the text box var controller = new S
        Crollmagic.controller ({container: "#wrapper-in"}); if ($ ("#p0"). Length = = 0) {$ ("#wrapper-in>div"). Children ("P"). Map (function (index,dom) {//
                Set the ID of the text box Dom.id = "P" +index;
            Addanimation (controller,dom.id);
        })}}//Add pulley text effect 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 : +, 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, Durat
            ion:250, offset:0}). Settween (Texthide)//This code can display the start and end position of the animation on the page
    . Addindicators (). AddTo (Controller);
 }

OK, using this plugin, this feature is not difficult to implement, the specific project code can be obtained by the address below.
Https://github.com/ArlexDu/STARWAR-TEXT