Scrollmagic-スクロールで背景色が正しく変化しない

Question

scrollmagicで自然なセクションワイプのデモを作成しようとしているので、ここでscrollmagicで問題が発生しています。私はquerySelectorに間違った何かを得たように が見えるが、私は私が間違っていたかわからない、ここで

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); 
    } 
}); 

私はコードのためにfiddleを作成しました。私はどこで流れに間違っていたのかを理解するのに役立ちますか？

Answer 1

「セクション」を削除して、パネルクラスをdivに追加するだけです。同じようにうまくいくはずです。 document.querySelectorAll（ "section.panel"）を変更する必要があります。 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/