Question

我希望它能够在滑块上或向下滚动到不同颜色的背景上，文本徽标将变为可在背景上读取。我想这可以通过找到主导图像颜色来完成，但这会很慢并且看起来有点过分。还有其他选择吗？

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

https://home.google.com/（等待图片更改）
http://www.acnestudios.com/us/en/home

这样做（滑块）的最佳方法是在每张幻灯片上制作一组颜色吗？

Answer 1

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

Answer 2

我不知道你的意思是什么，但如果你想在页面底部滚动时改变html dom的任何内容，如果您使用滚动页

，则必须为jquery scoll事件编写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');
        }
    });
});

为背景颜色设置动画的一些资源（在此之间进行一些转换）。 Here

如何更改背景更改时的文字颜色？

3 个答案: