如何改变文本颜色的背景变化

Question

我希望无论是在滑块上还是在不同颜色的背景上向下滚动，文本徽标都会在背景上变为可读的。我想这可以通过找到主要的图像颜色来完成，但这将是缓慢的，似乎是过度的。有别的选择吗?

我在野外看到的一些效果:

• https://home.google.com/(等待图像更改)
• http://www.acnestudios.com/us/en/home

最好的方法是(对于滑动条)在每个滑动条上创建一个颜色数组吗?

Answer 1

Google Home的工作方式是，在滑动条更改事件上更改主div的类，以便它也可以更改文本的颜色。它已经根据图像的颜色预先定义了文本的颜色，我认为这是你的情况下最好的方式。您可以减少大量的计算，并可以轻松地调整文本的颜色。

Answer 2

我不知道你到底是什么意思，但如果你想改变任何html dom当你滚动页面底部，如果你正在使用滚动页面，你必须为jquery滚动事件编写javascript代码

$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled to bottom of the page
   //type executing statement here
}
});

Answer 3

$(document).ready(function(){       
    var scroll_pos = 0;
    $(document).scroll(function() { 
        scroll_pos = $(this).scrollTop();
        if(scroll_pos > 210) {
            $("body").css('background-color', 'blue');
        } else {
            $("body").css('background-color', 'red');
        }
    });
});

一些资源来动画背景颜色(在它们之间做一些过渡)。