卷轴魔术 - 滚动时背景颜色未正确更改

Question

我在滚动魔术方面遇到了一个问题，因为我正在尝试在scrollmagic中创建自然部分擦除的演示，在那里我遇到了上面提到的问题。 看起来我在查询选择器中出错了，但我不知道我在这里做错了什么

.HTML

<div class="container-wrapper">
<div class="container-fluid">
<div class="scroller-content">
<div class="row custom-row">
<section class="panel red">
<div class="cover">
<strong>One</strong>
</div>
</section>
</div>
<div class="row custom-row">
<section class="panel green">
<div class="cover">
<strong>Two</strong>
</div>
</section>
</div>
<div class="row custom-row">
<section class="panel blue">
<div class="cover">
<strong>Three</strong>
</div>
</section>
</div>
<div class="row custom-row">
<section class="panel orange">
<div class="cover">
<strong>Four</strong>
</div>
</section>
</div>
</div>
</div>

.CSS

<style>
.panel {
height: 100%;
width: 100%;
position: relative;
margin: auto;
padding: 3rem 4rem;
box-sizing: border-box;
}
.red {
background: #ef5350;
}
.green {
background: #7CB342;
}
.blue {
background: #42A5F5;
}
.orange {
background: #FB8C00;
}
.custom-row {
text-align: center;
}
.cover {
margin: 13rem;
padding: 13rem;
top: 50%;
}
</style>

.JS

<script>
$(function () {
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});

var slides = document.querySelectorAll("section.panel");

for (var i = 0; i < slides.length; i++) {
new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i])
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
}
});

我已经为代码创建了一个小提琴，帮助我弄清楚流程出了什么问题？

Answer 1

只需删除"部分"并将面板类添加到div 中即可。这应该同样有效。您必须更改 document.querySelectorAll("section.panel"(;to document.querySelectorAll("div.panel"(;在 JS 代码中。就这样。

$(function() { // wait for document ready
// init
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 'onLeave'
}
});
// get all slides
var slides = document.querySelectorAll("div.panel");
// create scene for every slide
for (var i = 0; i < slides.length; i++) {
new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setPin(slides[i])
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
}
});

.panel {
height: 100%;
width: 100%;
position: relative;
margin: auto;
padding: 3rem 4rem;
box-sizing: border-box;
}
.red {
background: #ef5350;
}
.green {
background: #7CB342;
}
.blue {
background: #42A5F5;
}
.orange {
background: #FB8C00;
}
.custom-row {
text-align: center;
}
.cover {
margin: 13rem;
padding: 13rem;
top: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<div class="container-wrapper">
<div class="container-fluid">
<div class="scroller-content">
<div class="row custom-row panel red">
<div class="cover">
<strong>One</strong>
</div>
</div>
<div class="row custom-row panel green">
<div class="cover">
<strong>Two</strong>
</div>
</div>
<div class="row custom-row panel blue">
<div class="cover">
<strong>Three</strong>
</div>
</div>
<div class="row custom-row panel orange">
<div class="cover">
<strong>Four</strong>
</div>
</div>
</div>
</div>
</div>

或者检查小提琴，该代码片段似乎有以下代码问题：https://jsfiddle.net/u60gj9hc/1/