Javascript 卷轴魔术部分擦拭

我需要任何有scrollmagic.js经验的人的帮助

我试图创造类似的东西：

滚动页面时各部分重叠的位置

我正在使用scrollmagic（）

小提琴：

我遇到的主要问题是，在下一个面板可见之前，允许高于100%的内容滚动。我已经解决了一些问题

我的问题：

我需要在附加内容完成滚动后消除间隙，以便下一个面板显示附加内容何时位于其父内容的底部，而不是现在的-100%

我还需要弄清楚如何动态设置z索引，以便上一张幻灯片具有更高的z索引。我目前正在css中手动设置它们

感谢您的帮助

提前谢谢大家。 乔恩

---

console.clear（）；
console.log（“ScrollMagic v%s已加载”，ScrollMagic.version）；
//初始化
var controller=new ScrollMagic.controller（）；
//定义面板的移动
var wipeAnimation=new TimelineMax（）
.fromTo（“截面图.面板.蓝色”），1{
y:“0”
}, {
y:“-100%”，
轻松：线性。轻松无
})//从左向内
.to.（“章节面板附加内容”，1{
y:“-100%”，
轻松：线性。轻松无
})
.fromTo（“剖面图、面板图”，1{
y:“0”
}, {
y:“-100%”，
轻松：线性。轻松无
})//从左向内
.fromTo（“截面.面板.绿色”），1{
y:“0”
}, {
y:“-100%”，
轻松：线性。轻松无
})//从右向内
fromTo.（“波尔多区专家组”，1{
y:“0”
}, {
y:“0”，
轻松：线性。轻松无
}); // 自上而下
//创建场景以固定和链接动画
新的魔法。场景({
triggerElement:“#pinContainer”，
triggerHook：“onLeave”，
持续时间：“400%”
})
.setPin（“pinContainer”）
.setTween（动画）
.addTo（控制员）
html，
身体{
身高：100%；
保证金：0；
}
#钳形容器{
宽度：100%；
身高：100%；
溢出：隐藏；
}
.小组{
身高：100%；
宽度：100%；
位置：绝对位置；
文本对齐：居中；
}
.面板.附加内容{
/*排名：0*/
/*位置：绝对位置*/
}
蓝先生{
背景色：#3883d8；
z指数：10；
}
特奎斯先生{
背景色：#38ced7；
z指数：9；
}
格林先生{
背景色：#22d659；
z指数：8；
}
波尔多先生{
背景色：#953543；
z指数：7；
}
.panel>b{
字体大小：15px；
颜色：白色；
位置：相对位置；
显示：块；
身高：0；
溢出：可见；
最高：50%；
}

一个
两个
正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

正文

结束

三
四