时间戳

首页 > 解决方案 > ScrollMagic 取消伪选择器

javascript - ScrollMagic 取消伪选择器

问题描述

我正在尝试使用 ScrollMagic 库来使用“Section Wipes”效果，并且我使用nth-child(even)为每个第二个 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);
}

标签： javascriptcssscrolllibrariesscrollmagic

解决方案

.box:nth-child(even)将不起作用，因为.box元素不再是兄弟姐妹，它们被包裹.scrollmagic-pin-spacer

推荐阅读