0

我想要一个全屏（宽度/高度）面板在用户垂直滚动时水平（视差）动画。我正在尝试使用基本部分幻灯片示例，但无法使其正常工作。我这里有一把小提琴。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>

它立即运行时间轴动画而不是滚动。我错过了什么？

4

1 回答 1

1

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

于 2016-01-05T18:50:18.940 回答