滚动魔术 - 带有滚动视差文本的完整视频背景

Question

这是关于ScrollMagic(基本(部分的划像 - 手动。 (http://scrollmagic.io/examples/basic/section_wipes_natural.html(

我已经将上述内容与视频背景一起使用 - 我希望这些部分(文本，空白背景(以与示例中相同的方式向上滚动并进入视图，这工作正常。但是，当用户再次向下滚动时，我需要文本向上滚动和离开 - 这相当简单，但我一直在努力使用 ScrollMagic。

这是我试图实现的目标(但更复杂的(的一个例子 - www.sbs.com.au/theboat/。

我需要找到一种方法来使上一节向上滚动并在新部分出现在视野中时消失。

这是我正在使用的ScrollMagic代码。

<section class="panel ">
<b>ONE</b>
</section>
<section class="panel ">
<b>TWO</b>
</section>
<section class="panel ">
<b>THREE</b>
</section>
<section class="panel ">
<b>FOUR</b>
</section>
<section class="panel ">
<b>FIVE</b>
</section>
<script>
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});
// get all slides
var slides = document.querySelectorAll("section.panel");
// create scene for every slide
for (var i=0; i<slides.length; i++) {
new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i])
.addTo(controller);
}
});
</script>

Answer 1

在搜索了ScrollMagic演示之后 - 我找到了答案。 我不得不更改一个触发事件 - 请参阅下面编辑的代码，这是主页上 Scrollmagic 脚本的第一部分。

$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onCenter'
}
});

触发器钩子以前是"onLeave">