Добрый день уважаемые. Вот возник интерес сделать бесконечный цыкл перебора цветовой палитры радуги в 3-х блоках.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three balls</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style type="text/css">
#field {
position: relative;
width: 400px;
height: 400px;
margin-left: 10%;
margin-top: 10%;
border: 5px solid black;
}
.block {
width: 100%;
height: 33.33%;
border: 1px solid black;
}
</style>
<body>
<div id="field">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<script type="text/javascript">
window.onload = function () {
console.log('VSE GOOD');
var $field = $('#field'),
$block = $('.block'),
len =$('#field >div').length;
setInterval(Rainbow, 100);
function Rainbow(){
for (var i = 0; i < 255; i++) {
var center = 128;
var width = 127;
var frequency = Math.PI * 2 / len;
var rValue = Math.sin(frequency * i + 2) * width + center;
var gValue = Math.sin(frequency * i) * width + center;
var bValue = Math.sin(frequency * i + 4) * width + center;
var r = Math.floor(rValue),
g = Math.floor(gValue),
b = Math.floor(bValue);
$field.eq(i).css({
backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")",
});
console.log( i + "=i");
}
}
}
</script>
</body>
</html>
Эффект перехода цвета радуги должен происходить от верхнего блока к нижнему. При этом цветовая "нассыщеность" каждого блока должна немного отличаться, что б оно хорошо смотрелась (Иначе говоря что б одно и тоже время во всех 3-х блоках не было одного и того же цвета). Подскажите, пожалуйста, как такое сделать ?