我正在玩Jan Paepke出色的scrollMagic，似乎无法真正使用某些TimelineMax代码。当您向上滚动页面时，编号的圆圈应顺序淡入50％。从我的代码看来，它应该工作，但不是。我究竟做错了什么？
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>
最佳答案
我知道了。唯一的问题是，JS文件链接<script src="script.js"></script>必须出现在html代码的正下方，紧接在body标记上方（而不是在我拥有它的head标记之间），或者至少当我将其放置在此处时，它才起作用： d