gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:56:09 29 4
gpt4 key购买 nike

如果我有线性渐变,如何使用 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/

最佳答案

您必须使用 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

关于javascript - 如果我有线性渐变,则更改滚动上的颜色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42533638/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com