javascript - 无法让 Scrollmagic 插件作为示例工作

Question

所需行为的链接(滚动滑动):http://scrollmagic.io/examples/advanced/section_slides_manual.html

我从该网站复制了源代码，但无法回应它的行为。我知道有一些 css 从源代码中移出，但它似乎更像是一个我无法弄清楚的 javascript 问题。

fiddle 链接:https://jsfiddle.net/zcgxxj44/

	$(function () { // wait for document ready
		// init
		var controller = new ScrollMagic.Controller();

		// define movement of panels
		var wipeAnimation = new TimelineMax()
			// animate to second panel
			.to("#slideContainer", 0.5, {z: -150})		// move back in 3D space
			.to("#slideContainer", 1,   {x: "-25%"})	// move in to first panel
			.to("#slideContainer", 0.5, {z: 0})				// move back to origin in 3D space
			// animate to third panel
			.to("#slideContainer", 0.5, {z: -150, delay: 1})
			.to("#slideContainer", 1,   {x: "-50%"})
			.to("#slideContainer", 0.5, {z: 0})
			// animate to forth panel
			.to("#slideContainer", 0.5, {z: -150, delay: 1})
			.to("#slideContainer", 1,   {x: "-75%"})
			.to("#slideContainer", 0.5, {z: 0});

		// create scene to pin and link animation
		new ScrollMagic.Scene({
				triggerElement: "#pinContainer",
				triggerHook: "onLeave",
				duration: "500%"
			})
			.setPin("#pinContainer")
			.setTween(wipeAnimation)
      .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
			.addTo(controller);
	});

*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}
  body{
    position:relative;
  }
  #pinContainer {
		width: 100%;
		height: 100%;
		overflow: hidden;

   
	}
	#slideContainer {
		width: 400%; /* to contain 4 panels, each with 100% of window width */
		height: 500px;
            background:red;
	}
	.panel {
		height: 100%;
		width: 25%; /* relative to parent -> 25% of 400% = 100% of window width */
		float: left;
     background:blue;
	}
  .hola{
background:green;
height:120vw;
width:100vw;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/jquery.gsap.min.js"></script>
<div class="hola"></div>
<div id="pinContainer">
	<div id="slideContainer">
		<section class="panel blue">
			<b>ONE</b>
		</section>
		<section class="panel turqoise">
			<b>TWO</b>
		</section>
		<section class="panel green">
			<b>THREE</b>
		</section>
		<section class="panel bordeaux">
			<b>FOUR</b>
		</section>
	</div>
</div>

Answer 1

下面是相同的工作示例。

$(function() { // wait for document ready
  // init
  var controller = new ScrollMagic.Controller();

  // define movement of panels
  var wipeAnimation = new TimelineMax()
    // animate to second panel
    .to("#slideContainer", 0.5, {
      z: -150
    }) // move back in 3D space
    .to("#slideContainer", 1, {
      x: "-25%"
    }) // move in to first panel
    .to("#slideContainer", 0.5, {
      z: 0
    }) // move back to origin in 3D space
    // animate to third panel
    .to("#slideContainer", 0.5, {
      z: -150,
      delay: 1
    })
    .to("#slideContainer", 1, {
      x: "-50%"
    })
    .to("#slideContainer", 0.5, {
      z: 0
    })
    // animate to forth panel
    .to("#slideContainer", 0.5, {
      z: -150,
      delay: 1
    })
    .to("#slideContainer", 1, {
      x: "-75%"
    })
    .to("#slideContainer", 0.5, {
      z: 0
    });

  // create scene to pin and link animation
  new ScrollMagic.Scene({
      triggerElement: "#pinContainer",
      triggerHook: "onLeave",
      duration: "500%"
    })
    .setPin("#pinContainer")
    .setTween(wipeAnimation)
    .addIndicators() // add indicators (requires plugin)
    .addTo(controller);
});

<link href="http://scrollmagic.io/css/examples.css" rel="stylesheet" />
<link href="http://scrollmagic.io/css/style.css" rel="stylesheet" />
<link href="http://scrollmagic.io/css/normalize.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://scrollmagic.io/js/examples.js"></script>
<script src="http://scrollmagic.io/js/lib/modernizr.custom.min.js"></script>
<script src="http://scrollmagic.io/js/lib/highlight.pack.js"></script>
<script src="http://scrollmagic.io/js/examples.js"></script>
<script src="http://scrollmagic.io/js/lib/greensock/TweenMax.min.js"></script>
<script src="http://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script>
<script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
<script src="http://scrollmagic.io/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>

<div id="content-wrapper">
  <div id="example-wrapper">
    <div class="scrollContent">

      <section class="demo" id="section-slides">
        <style type="text/css">
          #pinContainer {
            width: 100%;
            height: 100%;
            overflow: hidden;
            -webkit-perspective: 1000;
            perspective: 1000;
          }
          
          #slideContainer {
            width: 400%;
            /* to contain 4 panels, each with 100% of window width */
            height: 100%;
          }
          
          .panel {
            height: 100%;
            width: 25%;
            /* relative to parent -> 25% of 400% = 100% of window width */
            float: left;
          }
        </style>
        <div id="pinContainer">
          <div id="slideContainer">
            <section class="panel blue">
              <b>ONE</b>
            </section>
            <section class="panel turqoise">
              <b>TWO</b>
            </section>
            <section class="panel green">
              <b>THREE</b>
            </section>
            <section class="panel bordeaux">
              <b>FOUR</b>
            </section>
          </div>
        </div>

      </section>
    </div>
  </div>
</div>