背景褪色的Fullpage.js

Question

嗨，我试图让两个插件工作，以便当你滚动有一个‘幻灯片’从一个完整的页面容器过渡到另一个，以及背景颜色淡出过渡。

插件

魔幻滚动色http://codepen.io/daveredfern/pen/zBGBJV

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

然而，如果我在任何其他标记/ div中包含所有的".panel“div，那么‘魔术滚动颜色’似乎就不起作用了--问题是，我需要一个容器div才能让fullpage.js工作。

即使我将背景颜色js更改为针对容器div名称(即)

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

...it仍然不能工作。我很难相信它不会在变量div和body标记之间工作。我在这里模拟了这个问题的一个例子：https://codepen.io/anon/pen/qmbmMm

如果你能提供任何帮助，我将不胜感激！

干杯

Answer 1

问题是你有

#fullpage {
  background: #f4f4f4;
}

和

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

在CSS ID中，它比类具有更高的优先级，因此它总是覆盖自定义颜色。轻松修复，将类更改为

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

Answer 2

scroll事件不会在fullPage.js中触发，除非您使用fullPage.js选项scrollBar:true或autoScrolling:false，如fullPage.js常见问题中详细介绍的那样。

因此，您需要滚动条来注册魔术滚动颜色所使用的scroll事件。

如果您不想使用滚动条，只想重新创建一个褪色效果，我将鼓励您使用fullPage.js衰落效应扩展。