Fullpage.js mit Hintergrundfarbe verblassen

Question

Hallo Ich versuche, 2 Plugins zu arbeiten, so dass, wenn Sie scrollen, ist eine "Folie" Übergang von einem ganzseitigen Container zum anderen zusammen mit einem Hintergrund Farbübergang Übergang.

Plugins

Magie Rollfarben http://codepen.io/daveredfern/pen/zBGBJV

Fullpage.js http://alvarotrigo.com/fullPage/

jedoch die 'magische Scrolling Farbe' scheint nicht zu funktionieren, wenn ich all das enthalten " .panel "divs in einem anderen tag/div anders als - die probleme sind, dass ich ein container div brauche Bestellung für vollepage.js zu arbeiten.

Auch wenn ich die Hintergrundfarbe ändern js (d) dass die div-Container Name

$body = $('#fullpage') or $body = $('fullpage') 

... es wird immer noch zum Ziel nicht. Es fällt mir schwer zu glauben, dass es zwischen den Variablen divs und body tag nicht funktionieren würde. Ich habe ein Beispiel für das Problem hier verspottet: https://codepen.io/anon/pen/qmbmMm

Ich wäre dankbar, wenn Sie irgendeine Hilfe anbieten könnten! immer

Prost

Answer 1

Das Problem ist, dass Sie

#fullpage { 
    background: #f4f4f4; 
} 

und

.color-indigo { 
    background-color: #4332CF; 
} 

In CSS-IDs haben eine höhere Priorität als die Klassen, so dass es überschreibt die benutzerdefinierte Farbe. Einfache Lösung, ändern Sie die Klassen zu

#fullpage.color-indigo { 
    background-color: #4332CF; 
} 

Answer 2

Die scroll Ereignis wird nicht in fullPage.js gefeuert werden, wenn Sie die fullPage.js Optionen verwenden scrollBar:true oder autoScrolling:false so detailliert in the fullPage.js FAQs.

Sie benötigen also eine Bildlaufleiste, um das Ereignis scroll zu registrieren, das von Magic Scrolling Color verwendet wird.

Wenn Sie keine Bildlaufleiste verwenden und nur einen Fading-Effekt erstellen möchten, würde ich Sie ermutigen, sich für die fullPage.js Fading Effect extension.