1

我正在玩 Jan Paepke 出色的 scrollMagic 并且似乎无法让某些TimelineMax代码真正工作。当您向上滚动页面时，带编号的圆圈应依次淡出 50%。从我的代码看来它应该可以工作，但事实并非如此。我究竟做错了什么？

这是我的实验

我正在使用Petr Tichy 的演示和一个 scrollMagic 示例

这是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>
4

1 回答 1

0

我想通了。唯一的问题是 JS 文件链接<script src="script.js"></script>需要出现在 html 代码下方，就在结束 body 标记上方（而不是在我拥有它的 head 标记之间），或者至少当我把它放在那里时它可以工作：D

于 2015-07-11T01:39:39.880 回答