我正在尝试使用ScrollMagic库来使用"Section“效果,并且我使用ScrollMagic为每一个div应用一种颜色,但是它似乎不适用于ScrollMagic。所有框都变成白色Html:
<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);
}发布于 2020-06-17 13:53:13
.box:nth-child(even)将无法工作,因为.box元素不再是兄弟姐妹,它们被.scrollmagic-pin-spacer包装
https://stackoverflow.com/questions/61119535
复制相似问题