Question

我正在玩Jan Paepke的精彩scrollMagic，似乎无法让一些TimelineMax代码真正起作用。向上滚动页面时，编号的圆圈应按顺序淡出50％。从我的代码看起来它应该工作，但事实并非如此。我究竟做错了什么？

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

Answer 1

Doh我明白了。唯一的问题是JS文件链接<script src="script.js"></script>需要出现在关闭正文标记上方的html代码下方（而不是我所拥有的头标记之间），或者至少当我把它放在那里时作品：D

jQuery ScrollMagic Timeline Max无效

1 个答案: