3

Como generar degradado como la imagen que adjunto en una onda de sonido

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>

1 respuesta 1

4

Con la funcion de liner-gradient en la propiedad background del .css() lo puedes lograr, solo le indicamos que tendra la direccion del degradado hacia abajo para que se visualice el primer color desde abajo, el cual es el verde, si quieres invertir los colores solo lo cambias a to top, y luego se colocan los colores con los que quieres realizar el degradado, el cual el primero es el rgba del verde y el segundo es amarillo aunque tambien lo puedes remplazar por el rgba que desees.

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>

3
  • Gracias Santiago era lo que quería. gracias por la ayuda
    – MarianoF
    el 20 dic. 2017 a las 13:36
  • 1
    @ElectricMarian Me alegra poder haberte ayudado, que te termine de ir muy bien! el 20 dic. 2017 a las 13:50
  • Muchas gracias! saludos!
    – MarianoF
    el 20 dic. 2017 a las 13:52

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.