jquery - 滚动时 HTML 文本颜色变化

Question

我知道标题具有误导性，但我没有更好的方法为我的问题添加标题：

我现在偶然发现了几个网站，在水平视差类型的单页布局中使用 HTML 5 和 CSS 3.0，在图像上加上标题，比如说，白色背景图像上的黑色，当你滚动到对了，黑色的文字逐渐变浅以适应新的背景出现，比如说黑色背景上的白色文字。

这似乎是一种增长趋势，特别是在 Windows 应用商店应用程序中，我正在尝试为网站复制类似的东西。

到目前为止，我使用 jQuery 对文本的可能坐标进行硬编码，当滚动位置达到右侧位置的大约 25% 时，开始使用 SVG 更改颜色，但这似乎过于复杂。

网上有例子吗？我试过搜索 HTML / CSS 文本淡入淡出，但这并没有真正返回任何具体的东西？

score 1 · Accepted Answer

在过去一年左右的时间里，当您向下滚动时，有足够多的网站会做一些花哨的事情，这是一种趋势。我想我会写博客，你知道，为了历史。

以下是您可以使用 jQuery 观察滚动和执行操作的方法：

$(window).scroll(function(eventObject) {
    // do stuff! You can find out about how far
    // the window has scrolled via the eventObject.
});

使用滚动位置，你可以改变颜色，做任何你能用 jQuery 做的事情。:)

1 回答 1