我试图使用ScrollMagic库来使用 "Section Wipes "效果,我为每隔一个div应用一个颜色,使用的是 偶数 但似乎对ScrollMagic不起作用。所有的框都变成了whiteHtml。
<div class="box" data="box-1"></div>
<div class="box" data="box-2"></div>
<div class="box" data="box-3"></div>
<div class="box" data="box-4"></div>
<div class="box" data="box-5"></div>
Css:
.box {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.box:nth-child(even) {
background-color: #ccc;
}
Javascript:
let boxes = document.querySelectorAll('.box');
let controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave',
}
});
for (let i = 0; i < boxes.length; i++) {
new ScrollMagic.Scene({
triggerElement: boxes[i]
})
.setPin(boxes[i], )
.addTo(controller);
}
.box:nth-child(even)
不能工作,因为 .box
元素不再是兄弟姐妹了,它们会被 .scrollmagic-pin-spacer