如何使用TimelineMax和ScrollMagic插件实现此动画

Question

我不太擅长JavaScript，但我需要做这个动画才能完成任务。

有必要在这个网站上制作这样一个动画。看看带牙刷和手机的蓝色方块"What make this the world’s"。为了实现它，作者使用了插件TimelineMax和scrollMagic。

我设法用卷轴修复了这个块，但我不知道下一步该怎么办。。如何滚动#滑块？

链接到Codepan。

$(document).ready(function() {
// scrollmagic
(function($) {
var wh = window.innerHeight,
$zone = $('#owlZone'),
$slider = $('#slider'),
$itemOne = $('#itemOne'),
$itemTwo = $('#itemTwo'),
$itemThree = $('#itemThree');
var ScreenHeight = $(window).height();

var ctrl = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 0,
tweenChanges: true,
duration: ScreenHeight
}
});
//create scene
$("#owlZone").each(function(index){
new ScrollMagic.Scene({
triggerElement: this
})
.setPin(this)
.addTo(ctrl);
});
// animate phone
var SMController1 = new ScrollMagic.Controller();
// var tlm = new TimelineMax();
// tlm.fromTo('#itemOne', 1, {x:0, y:0}, { x:0,  y:0    })
//    .fromTo('#itemTwo', 2, {x:"0", y:0},   { x:0,  y:0  })
//    .fromTo('#itemThree', 5, {x:0, y:0}, { x:0,  y:0    })
// .to('.toushbrush-slider', 3, {opacity:0});
// .fromTo('#slider', 2, {}, {});
// .to('#slider', 2, {rotation:90, left:'50%'});
var scene = new ScrollMagic.Scene({
triggerElement: "#owlZone",
duration: 1500, 
triggerHook: 0.2
})
// .setTween(tlm)
.addIndicators()
.setPin('#slider')
.addTo(SMController1);
}) (jQuery);

});

.section-block-three {
background: linear-gradient(to bottom right, #02050b 0, #0f204b 50%, #1c3b8b 100%);
background-color: #1c3b8b;
padding: 150px 0 100px;
position: relative; 
}
.mob-app__head h4 {
font-size: 50px;
font-family: "centrale_sans_light";
position: relative;
color: #fff;
font-weight: 300; 
}
.mob-app__head p {
margin: 20px 0;
color: #fff;
font-size: 30px;
line-height: 35px; 
}
.mob-app__content p {
line-height: 23px;
color: #fff;
font-size: 20px; 
}
.mob-app__image {
background-color: lime;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 135px;
height: 549px; 
}
.mob-app__store {
margin-top: 100px; }
.mob-app__store .app-store, .mob-app__store .google-play {
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
width: 150px;
height: 44px;
display: inline-block; 
}
.mob-app__store .app-store {
background-color: white;
margin-right: 20px; 
}
.mob-app__store .google-play {
background-color: purple; 
}
.toushbrush-slider {
overflow: hidden;
height: 350px;
margin: 100px 0 0 60px; 
}
.toushbrush-slider__images {
position: relative;
}
.toushbrush-slider__images .images__image-one, .toushbrush-slider__images .images__image-two, .toushbrush-slider__images .images__image-three {
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 175px;
height: 350px;
display: inline-block;
}
.toushbrush-slider__images .images__image-one {
background-color: red; 
}
.toushbrush-slider__images .images__image-two {
background-color: green; 
}
.toushbrush-slider__images .images__image-three {
background-color: yellow;
}
.toushbrush-slider__images .images__content {
display: inline-block;
width: 200px;
vertical-align: top;
margin: 50px 0 0 20px;
}
.toushbrush-slider__images .images__content p {
color: #fff;
line-height: 20px;
font-size: 16px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section-block-three" id="owlZone">
		<div class="container">
			<div class="row">
				<div class="col-md-5">
					<div class="mob-app__head">
						<h4>this is text<span></span></h4>
						<p><span>this is text</span> this is text</p>
					</div>
					<div class="mob-app__content">
						<p>this is text</p>
					</div>
					<div class="mob-app__store">
						<a href="#" class="app-store" alt="App Store"></a>
						<a href="#" class="google-play" alt="Google Play"></a>
					</div>
				</div>
				<div class="col-md-1">
					<div class="mob-app__image"></div>
				</div>
				<div class="col-md-6">
					<div class="toushbrush-slider" id="slider">
						<div class="toushbrush-slider__images" id="itemOne">
							<div class="images__image-one"></div>
							<div class="images__content">
								<p>this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text</p>
							</div>
						</div>
					  <div class="toushbrush-slider__images" id="itemTwo">
						<div class="images__image-two"></div>
						<div class="images__content">
							<p>this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text</p>
						</div>
					</div>
					  <div class="toushbrush-slider__images" id="itemThree">
						<div class="images__image-three"></div>
						<div class="images__content">
							<p>this is textthis is textthis is textthis is textthis is textthis is textthis is textthis is text</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</section>

Answer 1

我使用过一些滚动插件，但在从IE到Safari的主要浏览器上，性能一直很差。

我发现最好的方法是绑定一个事件处理程序来滚动，请参阅.scroll()：

$( "#target" ).scroll(function() {
globalScroll = $(window).scrollTop();
});

我将全局变量更新到最后一个位置，然后安装另一个超时处理程序：

setTimeout(function() {
// set your object properties according to last scroll position
// $('someobject').animate(...);
}, 200 /* experiment with timeout value for performance in all browsers */)

这有很大帮助，因为实际处理是在主线程空闲时完成的，并且通过不为每个滚动事件值执行渲染(用户甚至可能看不到)来避免潜在的缓慢行为。性能惩罚总是伴随着设计用于许多通用场景的插件，因此，通过学习根据您的特定需求定制代码将获得巨大回报。

我知道我可能会得到一些反对票，但我要说的是：你应该尽可能多地首先了解Javascript和你的代码是如何工作的，因为你迟早会遇到麻烦的。不幸的是，在你的客户有小抱怨之前，让别人在这里为你实现这一点只会有所帮助。