使用滚动魔法垂直滚动时的水平动画

Question

我想要一个全屏 (width/height) 面板，以便在用户垂直滚动时水平（视差）设置动画。我正在尝试使用基本部分幻灯片示例，但无法正常工作。我这里有一个 fiddle。 https://jsfiddle.net/69dz7tav/

$(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: 0,
    duration: "500%"
   })
   .setPin("#pinContainer")
   .setTween(wipeAnimation)
   .addTo(controller);
 });

html,body {
  width:100%;
  height:100%;
}
#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;
 }
  .blue {
 background-color: #3883d8;
}
.turqoise {
 background-color: #38ced7;
}
.brown {
 background-color: #a66f28;
}
.bordeaux {
 background-color: #953543;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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

我想我已经帮您解决了。在你的 jfiddle 中我收到错误 .setPin 和 .setTween 不是一个函数。这就是为什么您的代码立即运行的原因。没有起点，所以它只是准备就绪。确保包括 jquery.gsap.js、TweenMax.js、ScrollMagic.js、TweenLite.js、animation.gsap.js、CSSPlugin.js、debug.addIndicators.js。确保按此顺序排列它们，这非常重要。我真的要感谢你，你的一点代码帮助我完成了工作中的一个项目，没有你的代码就做不到！如需额外帮助，请添加 .addIndicators() 以帮助您查看 scrollmagic 的开始和结束位置！希望这对您有所帮助:)

使用滚动魔法垂直滚动时的水平动画

Horizontal animation while vertically scrolling with scroll magic

parallax

scrollmagic