Перебираем цвета радуги на jQuery
Добрый день уважаемые. Вот возник интерес сделать бесконечный цыкл перебора цветовой палитры радуги в 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-х блоках не было одного и того же цвета). Подскажите, пожалуйста, как такое сделать ? |
Подскажите, пожалуйста, где я допускаю ошибку ?
https://jsfiddle.net/rxpjby7n/ Почему у меня не происходит "задержки на цвете". Почему сразу отбрасывает на фиолетовый ? Я хочу что б было так :  |
Black_Star,
Потому что с интервалом 100 мс ты запускаешь функцию Rainbow(), в которой прокручиваешь сразу все цвета Вынеси определение i из функции, убери цикл по i, внутри функции наращивай i c проверкой i<255 |
Dilettante_Pro, спасибо, за совет.
Оно теперь у меня хоть моргает :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rainbow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>#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('Everything GOOD');
var $field = $('#field'),
$block = $('.block'),
len =$('#field >div').length;
var center = 128;
var width = 127;
var frequency = Math.PI * 2 / len;
var i = 0;
setInterval(Rainbow, 100);
function Rainbow(){
if ( i < 255 ) {
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);
$block.eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});
$block.eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});
$block.eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")"});
i++
if (i==254) {
i=1
return i
}
console.log( "i=" + i);
}
}
}
</script>
</body>
</html>
Осталось понять почему оно отображает только 3 цвета. Это при том что rgb праметры каждую иттерацию разные Подскажите, пожалуйста, как сделать всю палитру |
Помогите остановить цикл :) Я хочу что б по парному нажатию мой цикл перебора цветов спектра останавливался. Мне кажется, что бесконечные циклы это не хорошо для производительности.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rainbow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<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;
}
.block:nth-child(1) {
background-color: red;
}
.block:nth-child(2) {
background-color: green;
}
.block:nth-child(3) {
background-color: blue;
}
</style>
</head>
<body>
<div id="field">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<input id="buttonPush" type="button" value="Colorize">
<script type="text/javascript">
window.onload = function () {
console.log('Everything GOOD');
var $field = $('#field'),
$block = $('.block'),
$colorize = $('.colorize'),
len =$('#field >div').length,
button=$('#buttonPush');
var center = 128;
var width = 127;
var frequency = Math.PI * 2 / 256;
var i = 0;
button.on('click', function(){
$block.toggleClass('colorize');
// console.log('button pushed');
if($('.block').hasClass('colorize')){
Rainbow();
setInterval(Rainbow, 50);
} else{ i=0;
$('.block').eq(0).css({backgroundColor: "red"});
$('.block').eq(1).css({backgroundColor: "green"});
$('.block').eq(2).css({backgroundColor: "blue"});
}
});
function Rainbow(){
if ( i < 255 ) {
var r = Math.floor(Math.sin(frequency * i + 2) * width + center);
var g =Math.floor( Math.sin(frequency * i) * width + center);
var b = Math.floor(Math.sin(frequency * i + 4) * width + center);
$('.colorize').eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1+ ")"});
$('.colorize').eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.8 + ")"});
$('.colorize').eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.6 + ")"});
// $block.eq(0).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1+ ")"});
// $block.eq(1).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.8 + ")"});
// $block.eq(2).css({backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.6 + ")"});
i++
if (i==255) {
i=1
return i
}
console.log( "i=" + i);
}
}
}
</script>
</body>
</html>
|
Можете покликать
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rainbow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>#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 () {
var $block = $('.block'),
width = 255,
i = 0,
step,
rValue,
gValue,
bValue,
startShow;
window.onclick = function () {
if (startShow) { clearInterval(startShow); startShow = null }
else startShow = setInterval(Rainbow, 50);
}
function Rainbow() {
if (i < 255) {
step = 2 * Math.PI * i / 255;
if (Math.sin(step) > 0) rValue = Math.sin(step) * width;
else rValue = 0;
if (Math.sin(step + Math.PI / 2) > 0) gValue = Math.sin(step + Math.PI / 2) * width;
else gValue = 0;
if (Math.sin(step + Math.PI) > 0) bValue = Math.sin(step + Math.PI) * width;
else bValue = 0;
var r = Math.floor(rValue),
g = Math.floor(gValue),
b = Math.floor(bValue);
$block.eq(0).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1 + ")" });
$block.eq(1).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.7 + ")" });
$block.eq(2).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")" });
i++;
} else i = 0;
}
}
</script>
</body>
</html>
|
Dilettante_Pro, спасибо. Интересный подход в решении данного вопроса :thanks:
|
вариант ближе к вашему
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rainbow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
</head>
<style>#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 () {
var $block = $('.block'),
width = 123,
center = 123,
i = 0,
step,
rValue,
gValue,
bValue,
startShow;
window.onclick = function () {
if (startShow) { clearInterval(startShow); startShow = null }
else startShow = setInterval(Rainbow, 50);
}
function Rainbow() {
if (i < 360) {
step = 2 * Math.PI * i / 360;
rValue = Math.sin(step) * width + center;
gValue = Math.sin(step + Math.PI / 2) * width + center;
bValue = Math.sin(step + Math.PI) * width + center;
var r = Math.floor(rValue),
g = Math.floor(gValue),
b = Math.floor(bValue);
$block.eq(0).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 1 + ")" });
$block.eq(1).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.7 + ")" });
$block.eq(2).css({ backgroundColor: "rgba(" + r + ", " + g + ", " + b + ", " + 0.5 + ")" });
i++;
} else i = 0;
}
}
</script>
</body>
</html>
|
Ещё раз спасибо. :thanks:
Это помогло мне сделать вот это) http://codepen.io/BlackStar1991/pen/KNMEwG?editors=1010 |
Black_Star,
:) |
| Часовой пояс GMT +3, время: 03:15. |