jQuery ScrollMagic時間軸最大不能工作

我正在玩Jan Paepke的輝煌scrollMagic，似乎無法得到一些TimelineMax代碼實際工作。當您向上滾動頁面時，編號的圓圈應該按順序褪去50％。從我的代碼看，它應該可以工作，但事實並非如此。我究竟做錯了什麼？jQuery ScrollMagic時間軸最大不能工作

Here's a plunker of my experiment

我從Petr Tichy's demo工作和a scrollMagic example

這裏的JS：

(function($) { 

    var wh = window.innerHeight, 
    $m = $('.m'), 
    $c1 = $('.c1'), 
    $c2 = $('.c2'), 
    $c3 = $('.c3'), 
    $c4 = $('.c4'); 

    // init 
    var ctrl = new ScrollMagic.Controller(); 

     // build scene 
     var circles = new TimelineMax(); 
      circles 
      .to($c2, 1.5, {alpha: 0.5, ease: Cubic.easeOut}) 
      .to($c4, 1.5, {alpha: 0.5, delay:0.25}) 
      .to($c1, 1.5, {alpha: 0.5, delay:0.25}) 
      .to($c3, 1.5, {alpha: 0.5, delay:0.25}); 

    new ScrollMagic.Scene({ 
    triggerElement: $('.container2')[0], 
    duration: '100', offset: -50 
    }) 
    .setTween(circles) 
    .addIndicators({name: "circlesIndicator"}) 
    .addTo(ctrl); 

})(jQuery);

這裏的CSS：

.container1{height:550px;width: 600px;position:relative;} 
.container2{height:2000px;width: 600px;position:relative; } 
.m{top:250px;left: 250px;width:150px;height:150px;position:absolute;} 
.c1{top:400px;left: 100px;width:100px;height:100px;position:absolute;} 
.c2{top:150px;left: 100px;width:100px;height:100px;position:absolute;} 
.c3{top:400px;left: 450px;width:100px;height:100px;position:absolute;} 
.c4{top:150px;left: 450px;width:100px;height:100px;position:absolute;}

這裏的HTML：

<head> 
    <link rel="stylesheet" href="style.css"> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script> 

    <script src="script.js"></script> 

    </head> 

    <body> 

    <div class="container1"><h1>Hola Plunkerz!</h1> 
    <p>This is an animation test that begins when content scrolls into the viewport. 
    Therefore, please scroll down to see test, thanks!</p></div> 

    <div class="container2"> 

     <div class="c1"><img src="http://i.imgur.com/y7HdEfn.png"></div> 
     <div class="c2"><img src="http://i.imgur.com/s4A18qr.png"></div> 
     <div class="m"><img src="http://i.imgur.com/kBaLqYH.png"></div> 
     <div class="c3"><img src="http://i.imgur.com/NF5tdJN.png"></div> 
     <div class="c4"><img src="http://i.imgur.com/M4xBAUS.png"></div> 

    </div>  

    </body>

來源

2015-07-11 Agent Zebra

我明白了。唯一的問題是JS文件鏈接<script src="script.js"></script>需要出現在關閉主體標籤（而不是頭標籤之間）的HTML代碼的下面，或者至少當我把它放在那裏時它可以工作：D

來源

2015-07-11 01:39:39

jQuery ScrollMagic時間軸最大不能工作

回答

相關問題