Scrollmagic- Hintergrundfarben ändern sich nicht richtig auf Scroll

Ich habe hier ein Problem mit scrollmagic, da ich versuche, eine Demo von natürlichen Abschnitt wipes in scrollmagic zu erstellen und da habe ich dieses oben erwähnte Problem. Sieht aus wie ich etwas falsch in querySelector bekam, aber ich weiß nicht, was ich hier falsch tatScrollmagic- Hintergrundfarben ändern sich nicht richtig auf Scroll

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>

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

Ich habe eine fiddle für den Code erstellt mir helfen, herauszufinden, wo ich mit dem Fluss falsch gelaufen bin?

Quelle

2017-08-25 Anonymous

hier jemand für einen Vorschlag? –

Es ist unklar, welchen Effekt Sie erstellen möchten? Sie möchten Farbfelder in der Ansicht scrollen lassen? Dann können Sie einfach HTML verwenden. Oder möchten Sie, dass die Hintergrundfarbe nach x pxs wechselt? –

Ich möchte grundlegende Abschnitt-Swipe von scrollmagic verwenden http://scrollmagic.io/examples/basic/section_wipes_natural.html –

Entfernen Sie einfach die "Abschnitte" und fügen Sie den Divs die Panel-Klassen hinzu. Das sollte genauso gut funktionieren. Sie müssen document.querySelectorAll ("section.panel") ändern; zu dokumentieren.querySelectorAll ("div.panel"); im JS-Code. Das ist alles.

$(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>

Oder die Geige überprüfen, scheint das Snippet mit diesem Code Probleme zu haben: https://jsfiddle.net/u60gj9hc/1/

Quelle

2017-09-01 07:54:45

Scrollmagic- Hintergrundfarben ändern sich nicht richtig auf Scroll

Antwort

Verwandte Themen