Set the color of many sections from green to red.

Question

There can be any number of divs in my project, such as one thousand, two thousand, one million, etc. I want their background colors to change from green to red. therefore, they all acquire different shades of color. the first div will be "real" green, the last div will be "real" red.

Here is what I have. As you can see, at the end there are divs that are left without a background color. I would prefer to solve this problem with rgb.

$(function(){ var r = 20; var g = 200; var b = 10; for(var i = 0; i < 300; i++){ $("body").append("<div class = 'box'>"); } $(".box").each(function(){ if(g > 0 && r < 255){ $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")"); g-=1; r+=1; } }) }) 

 .box{ border:2px solid black; margin: 10px; width: 20%; height: 100px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

Someone wrote this before but deleted it.

 $(function(){ var r = 20; var g = 200; var b = 10; for(var i = 0; i < 300; i++){ $("body").append("<div class = 'box'>"); } var noOfBoxes = $(".box").length, minRed = 20, maxRed = 255, maxGreen = 200 $(".box").each(function(i){ $(this).css("background", "rgb(" + r + "," + g + "," + b + ")"); g = parseInt(maxGreen - maxGreen * (i /noOfBoxes), 10) r = parseInt(minRed + maxRed * (i/ noOfBoxes), 10) console.log(g) }) }) 

 .box{ border:2px solid black; margin: 10px; width: 20%; height: 100px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 

Answer 2

Yes, I do not mind if there is a slight duplication. The main thing is that at the beginning of the screen users see green and further they see that everything turns red.

Try without if condition

 $(function(){ var r = 20; var g = 200; var b = 10; for(var i = 0; i < 300; i++){ $("body").append("<div class = 'box'>"); } $(".box").each(function(){ $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")"); g-= 1; r+= 1; }) }) 

 .box{ border:2px solid black; margin: 10px; width: 20%; height: 100px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 

Answer 3

Try this, do not increase or decrease the values ​​of r and g at the same time, do it alternatively ...

 $(function(){ var r = 55 var g = 200; var b = 0; for(var i = 0; i < 300; i++){ $("body").append("<div class = 'box'>"); } $(".box").each(function(i){ if(g > 0 && r < 255){ $(this).css("background", "rgb("+ r + ","+ g + ","+ b + ")"); if(i%2 == 0) { g-=1; } else { r+=1; } } }) }) 

 .box{ border:2px solid black; margin: 10px; width: 20%; height: 100px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 4

An approach using css linear-gradient in the background of a container element containing .box elements, transparent background in .box ; included outline , border to mask linear-gradient visibility with the outer right of the container; note that this part of css can be improved. Set the for loop to 2000 iteration. linear-gradient should display the expected color transitions gradually from lime to red between elements 0 to n .box .

 for (var i = 0, container = document.getElementById("container"); i < 2000; i++) { container.insertAdjacentHTML("beforeend", "<div class=box></div>"); }; 

 body { overflow-x: hidden; } #container { background: linear-gradient(to bottom, lime, red); outline:25px solid #fff; border:25px solid #fff; width: calc(100vw - 2.5%); /* adjusted for width of stacksnippets */ height: auto; display: block; overflow-x: hidden; } .box { border: 2px solid black; margin: 10px; width: 20%; height: 100px; float: left; background: transparent; outline: 20px solid #fff; } 

 <div id="container"> </div> 

jsfiddle https://jsfiddle.net/0kL4f59z/5/