SummArg | Cursos y recursos para webmasters

06/07/2011

Cómo crear un ecualizador animado con jQuery?

Este tutorial nos guía en el armado de un ecualizador animado que consiste en colocar algunas barras que cambian de tamaño para lograr el efecto. La intención es poder utilizar este gráfico de manera independiente de un verdadero reproductor de audio, a modo de adorno en un website con temáticas relacionadas a la música.

El código para lograr el efecto que pueden apreciar en el demo, es realmente muy simple. Primero colocamos la estructura HTML:
<div class="eq">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>

Luego le damos un poco de estilo a todos esos span.
.bar {
background-color: green;
width:7px;
height:15px;
display: inline-block;
vertical-align: bottom;
}

Hasta aquí solamente se han dibujado 5 barras de color verde, ahora toca animarlas variando el alto de cada una de ellas de forma totalmente aleatoria y que tal movimiento sea constante. Para ello se utilizará jQuery:
function fluctuate(bar) {
var hgt = Math.random() * 10;
hgt += 1;
var t = hgt * 30;
bar.animate({
height: hgt
}, t, function() {
fluctuate($(this));
});
}
$(".bar").each(function(i) {
fluctuate($(this));
});

Tutorial | Demo

Dejar un comentario