Question

我希望有一个全屏（宽度/高度）面板，以便在用户垂直滚动时水平设置动画（视差）。我正在尝试使用基本部分幻灯片示例，但无法使其工作。我这里有个小提琴。 https://jsfiddle.net/69dz7tav/

＆＃13;

$(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);
	});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

Answer 1

想想我为你想出来的。在你的jfiddle我得到错误.setPin和.setTween不是一个函数。这就是您的代码立即运行的原因。没有起点，所以它只是准备就绪。确保包括jquery.gsap.js，TweenMax.js，ScrollMagic.js，TweenLite.js，animation.gsap.js，CSSPlugin.js，debug.addIndicators.js。请确认你在这个命令中，这是非常重要的。我想要感谢你，你的一些代码帮助我完成了一个项目的工作，没有你的代码就没能做到！为了额外的帮助，添加.addIndicators（）来帮助您查看您的scrollmagic开始和结束的位置！希望这有助于：）

水平动画，同时垂直滚动滚动魔术

1 个答案: