正如标题所暗示的那样，我正试图在Uber的网站上模拟滚动效果。我目前正在使用ScrollMagic库来尝试实现这一点，而我几乎拥有它，但需要一些帮助才能完成它。
在此处查看其滚动效果的演示：http://i.imgur.com/W3QLV7T.gif
您可以从gif看到有三个部分。右侧的部分是独立滚动的，但手机的图像保持固定。手机与页面一起滚动的唯一时间是当用户滚过第一或第三部分时。
我正试图解开＆＃34;图像并使用测试3 部分结束触发器并使其随之向上滚动，但我没有取得任何成功。我的图片属于底部。如何在正确的场景下释放图像以正确模拟所需的效果？
答案 0 :(得分：0)
我已经稍微修改了您的JSFiddle标记，使JS变干，并添加了一些小CSS。
(function($) {
var imageSel = '#pinImg';
var sectionsSel = '#start aside > section';
var pinStart, pinEnd, pinDuration;
varsInit();
var controller = new ScrollMagic.Controller({
addIndicators: true
});
var scenes = [
new ScrollMagic.Scene({
triggerHook: 0.05,
triggerElement: imageSel,
duration: pinDuration
})
.setPin(imageSel)
];
scenes = scenes.concat( createScene(sectionsSel) );
controller.addScene( scenes );
function varsInit() {
// var afterMargin = 30;
var sectionCount = 3;
pinEnd = $( $(sectionsSel).get(sectionCount - 1) ).offset().top;
// pinStart = $(imageSel).offset().top - afterMargin;
pinDuration = pinEnd;
}
function createScene(sel) {
var sceneList = [];
$(sel).each(function(index, elem) {
var focusClass = 'imageSel--'+ index;
sceneList.push(
new ScrollMagic.Scene({
triggerHook: 0,
triggerElement: elem,
offset: -30,
duration: ($(elem).outerHeight()+30)
})
.on('enter', function(e) {
$(imageSel).addClass(focusClass);
})
.on('leave', function(e) {
$(imageSel).removeClass(focusClass);
})
);
});
return sceneList;
}
})(jQuery);/* Bootstrap Override */
/* =================== */
.row {
display: table;
margin-bottom: 0;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
/* Bootstrap Override END */
/* ======================= */
.scrollmagic-pin-spacer {
display: inline-block !important;
}
#start { min-height: 400vh; }
#start aside > section:first-child{ margin-top: 50%; }
#start aside > section .row { padding-bottom: 50%; }
#start aside > section:last-child .row { padding-bottom: 0; }<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<div class="row">
<div class="col-sm-12 jumbotron">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>
<div id="start" class="container">
<div class="row">
<div class="col-sm-6">
<img id="pinImg" src="https://placehold.it/300x200">
</div>
<aside class="col-sm-6">
<section>
<div class="row">
<div id="test1" class="col-sm-12 well">
<h3>
Test 1
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</section>
<section>
<div class="row">
<div id="test2" class="col-sm-12 well">
<h3>
Test 2
</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</p>
</div>
</div>
</section>
<section>
<div class="row">
<div id="test3" class="col-sm-12 well">
<h3>
Test 3
</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</section>
</aside>
</div>
<section>
<div class="row">
<div class="col-sm-12 jumbotron">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</section>
<section>
<div class="row">
<div class="col-sm-12 jumbotron">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>