更改滚动上的颜色背景如果我有线性渐变

如何使用js更改滚动上的颜色背景更改滚动上的颜色背景如果我有线性渐变

background: linear-gradient(115deg, #42c344 0%,#42c344 40%,#c4efc4 40%,#ffffff 40%,#ffffff 100%); background-attachment: fixed;

我发现它： http://jsfiddle.net/cgspicer/V4qh9/ 这： http://codepen.io/Funsella/pen/yLfAG/

来源

2017-03-01 Info Mieszadło

你想拥有纯色或者是上滚动移动的线性渐变？您使用的示例有纯色，然后在用户滚动并将其设置为背景时计算新的颜色。 –

我希望线性渐变使用#fff，第二种颜色的计算方法与我的示例中类似。 –

你必须使用RGB值来设置渐变和使用Javascript动画的。

你可以在下面看到一个随机的例子，或者在附带的笔中。只要连上你的“上滚动” /“轮”事件来触发updateGradient功能：

var colors = new Array(
    [62,35,255], 
    [60,255,60], 
    [255,35,98], 
    [45,175,230], 
    [255,0,255], 
    [255,128,0]); 

var step = 0; 
//color table indices for: 
// current color left 
// next color left 
// current color right 
// next color right 
var colorIndices = [0,1,2,3]; 

//transition speed 
var gradientSpeed = 0.002; 

function updateGradient() 
{ 

    if ($===undefined) return; 

var c0_0 = colors[colorIndices[0]]; 
var c0_1 = colors[colorIndices[1]]; 
var c1_0 = colors[colorIndices[2]]; 
var c1_1 = colors[colorIndices[3]]; 

var istep = 1 - step; 
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]); 
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]); 
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]); 
var color1 = "rgb("+r1+","+g1+","+b1+")"; 

var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]); 
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]); 
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]); 
var color2 = "rgb("+r2+","+g2+","+b2+")"; 

$('#gradient').css({ 
    background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({ 
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}); 

    step += gradientSpeed; 
    if (step >= 1) 
    { 
    step %= 1; 
    colorIndices[0] = colorIndices[1]; 
    colorIndices[2] = colorIndices[3]; 

    //pick two new target color indices 
    //do not pick the same as the current one 
    colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * 
(colors.length - 1))) % colors.length; 
    colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * 
(colors.length - 1))) % colors.length; 

    } 
} 

setInterval(updateGradient,10);

http://codepen.io/quasimondo/pen/lDdrF

来源

2017-05-23 15:38:26

更改滚动上的颜色背景如果我有线性渐变

回答

相关问题