向下滚动页面时多次更改背景颜色 [英] Change background color multiple times while scrolling down the page

问题描述

我正在开展这个项目，我正在使用视差滚动创建一个网站。它应该是一个长的寻呼机。当您向下滚动页面时，当您到达页面的每个新部分时，背景颜色应该会发生变化。

I'm working on this project where I’m creating a website using parallax scrolling. It's supposed to be one long one pager. As you scroll down the page the background color is supposed to change when you get to each new section of the page.

我花了几天时间在网上搜索，也在stackoverflow上搜索，但我没有找到任何可行的方式。

I have spent days searching the web and also here on stackoverflow, but I haven't found anything that works in the way i want it to.

我在堆栈上找到了这个脚本：

I found this script here on stack:

 var tStart = 100 // Start transition 100px from top
      , tEnd = 500   // End at 500px
      , cStart = [250, 195, 56]  // Gold
      , cEnd = [179, 217, 112]   // Lime
      , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]];

    $(document).ready(function(){
        $(document).scroll(function() {
            var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
            p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
            var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
            $("body").css('background-color', 'rgb(' + cBg.join(',') +')');
        });
    });

http://jsfiddle.net/dtZDZ/12/ 这是小提琴

这个脚本完全符合我的要求，除了我只一次来回改变颜色。当你向下滚动页面时，我需要它来改变背景颜色4-5次。此外，我希望它在改变颜色时可以平滑过渡，如同小提琴一样：）

This script does exactly what I want, except that I only change color one time back and forth. I need it to change background color like 4-5 times while you scroll down the page. Also I would like it to have a smooth transition when changing colors like in the fiddle :)

我希望那里有人可以帮助我，或者只是指着我正确的方向。

I hope someone out there can help me with this or just point me in the right direction.

提前谢谢

推荐答案

你可以使用渐变背景使用css：

You could use a gradient background using css :

body {
background-color: linear-gradient(red, blue, green, blue, red)
}

向下滚动，您的背景将会改变。这种方法有点欺骗，但是当它到达背景末尾时它会循环。

Scrolling down, your background will change. This method is a little bit "cheaty", but it works as it will loop when it arrives at the end of the background.

这篇关于向下滚动页面时多次更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！