我不擅长JavaScript，但我需要做这个动画来完成工作。
有必要实现on this website这样的动画。借助牙刷和手机，看看blue block“是什么让这个世界成为现实”。为了实现它，作者使用了插件TimelineMax和scrollMagic。
我设法用滚动修复了块，但我不知道下一步该做什么.. 如何滚动#slider块？
链接到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>
答案 0 :(得分：0)
我使用了一些滚动插件，但在主要浏览器（从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 */)
这有很大帮助，因为实际处理是在主线程空闲时完成的，并且通过不对每个滚动事件值执行渲染（用户可能甚至看不到）来避免潜在的慢行为。性能损失总是带有旨在与许多通用场景一起使用的插件，因此通过学习根据您的特定需求定制代码将获得丰厚的回报。
我知道我可能会得到一些downvotes但是我在这里：你应该尽可能多地尝试首先理解Javascript以及你的代码是如何工作的，因为你迟早会遇到麻烦。如果有人为您实施此功能，我们很遗憾只会在您的客户收到小额投诉之前提供帮助。