How to generate color gradients in Sound Bars with Reflection js / css

Question

How to generate color gradients in Sound Bars with Reflection js / css

Navigation

#1 by (4 votes)

3

How to generate gradient as the image that I attached in a sound wave

var elem = $('div');
var count = elem.length;

var loop = function(){ 
  
  setTimeout(function(){
    elem.each(function(){
      var $this = $(this);
      var height = (Math.random() * 30) + 1;
      $this.css({
        'background': 'rgba(0, 0, 0,'+(.75-($this.index()/count)/2)+')',
        'bottom': height,
        'height': height
      });
    });
    loop();
  }, 300);
  
}
    
loop();

body {
	padding: 100px 0 0 100px; 
}

div {
	background: #000;
  float: left;
  height: 1px;
  margin: 0 1px 0 0;
  position: relative;
  transition: all linear 300ms;
  width: 2px;
  -webkit-box-reflect:below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.35, transparent), to(white));
}


/*estilos que probe yo pero no me funciono*/
 background: #000;
  float: left;
  height: 4px;
  margin: 0 1px 0 0;
  position: relative;
  transition: all linear 300ms;
  width: 3px;
  z-index: 20;
  -webkit-box-reflect:below -1px -webkit-gradient(linear, left top, left bottom, from(#febf0d), color-stop(0.35, #febf0d), to(#febf0d));

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

javascript jquery html css

asked by MarianoF 20.12.2017 в 14:03

source

1 answer

c ++: Doubt with exception handling How to pair JSOn

score 4 · Accepted Answer

With the function of liner-gradient in the property background of .css() you can achieve it, we only indicate that it will have the address of the gradient down so that the first color is displayed from below, which is the green , if you want to invert the colors just change it to to top , and then place the colors with which you want to make the gradient, which the first is the rgba of the green and the second is yellow but you can also replace it with the rgba what you want.

var elem = $('div');
var count = elem.length;

var loop = function(){ 
  
  setTimeout(function(){
    elem.each(function(){
      var $this = $(this);
      var height = (Math.random() * 30) + 1;
      $this.css({
        'background': 'linear-gradient(to top, rgba(61, 175, 5,'+(.75-($this.index()/count)/2)+'),yellow)',
        'bottom': height,
        'height': height
      });
    });
    
    loop();
  }, 300);
  
}
    
loop();

body {
	padding: 100px 0 0 100px; 
}

div {
	background: #000;
  float: left;
  height: 1px;
  margin: 0 1px 0 0;
  position: relative;
  transition: all linear 300ms;
  width: 2px;
  -webkit-box-reflect:below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.35, transparent), to(white));
}


/*estilos que probe yo pero no me funciono*/
 background: #000;
  float: left;
  height: 4px;
  margin: 0 1px 0 0;
  position: relative;
  transition: all linear 300ms;
  width: 3px;
  z-index: 20;
  -webkit-box-reflect:below -1px -webkit-gradient(linear, left top, left bottom, from(#febf0d), color-stop(0.35, #febf0d), to(#febf0d));

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