Fullpage.js with background color fade

Question

こんにちは私は2つのプラグインを使用してスクロールすると、1つのフルページコンテナから別のフルページコンテナへの 'スライド'トランジションがバックグラウンドカラーフェードトランジションになるようにしようとしています。

プラグイン

カラー http://codepen.io/daveredfern/pen/zBGBJV

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

をスクロールマジック、私はすべて "が含まれている場合は、 'マジックスクローリングカラーは' 働くように見えるdoesntのが.panel "他のタグ/ div以外のdiv - 私はコンテナdivが必要ですfullpage.jsが動作するように指示します。

私はそのコンテナのdiv要素名 （すなわち）

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

をターゲットに背景色JSを変更しても...それはまだ動作しません。変数divとbodyタグの間で何も動作しないとは信じられません。 私はこの問題の例をここで嘲笑しました：https://codepen.io/anon/pen/qmbmMm

何か助けてもらえれば幸いです！

乾杯

Answer 1

問題は、あなたがのがクラスよりも高い優先度を持っているCSSのIDで

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

#fullpage { 
    background: #f4f4f4; 
} 

と

を持っているということですので、それは常にカスタムカラーを上書きします。あなたは the fullPage.js FAQsで scrollBar:trueまたは autoScrolling:falseなど詳細なfullPage.jsオプションを使用しない限り、簡単に修正は、fullPage.jsにクビにしません scrollイベント

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

Answer 2

にクラスを変更します。

したがって、Magic Sc​​rolling Colorで使用されているscrollイベントを登録するにはスクロールバーが必要です。

スクロールバーを使用せず、フェーディング効果を再作成したい場合は、fullPage.js Fading Effect extensionをお勧めします。