Clicky sound bars

You might have seen this type of thing on other sites recently and we loved it.
The idea is a simple icon which animates to show the user there is a sound track available to listen to if they wish to listen to it. We, like most people hate it when video sound is active by default so this is a really nice work around.
We set our clever web design team the task of creating this icon in CSS & Javascript and here is the result… (see it in action here (desktop only))

The HTML

<div class="toggleSound">
    <div class="clickyBars">
        <div class="blockWrapper">
            <div class="barWrapper">
                <div class="soundBar"></div>
            </div><!-- barWrapper -->
        </div><!-- blockWrapper -->
        <div class="blockWrapper">
            <div class="barWrapper">
                <div class="soundBar"></div>
            </div><!-- barWrapper -->
        </div><!-- blockWrapper -->
        <div class="blockWrapper">
            <div class="barWrapper">
                <div class="soundBar"></div>
            </div><!-- barWrapper -->
        </div><!-- blockWrapper -->
        <div class="blockWrapper">
            <div class="barWrapper">
                <div class="soundBar"></div>
            </div><!-- barWrapper -->
        </div><!-- blockWrapper -->
    </div><!-- clickyBars -->
</div><!-- toggleSound -->

The CSS

.toggleSound { position: absolute; bottom: 15px; right: 25px; z-index: 1000; cursor: pointer; }
.toggleSound .blockWrapper { display: inline-block; }
.toggleSound .barWrapper { height: 30px; width: 4px; display: block; position: relative; }
.toggleSound .soundBar { background-color: #fff; width: 100%; height: 10px; position: absolute; left: 0px; bottom: 0px; }

The jQuery

// Clicky Bars
function fluctuate(soundBar) {
    var amplitude = Math.random() * 10;
    var height = amplitude * 3;
    soundBar.animate({
        height: height
    }, function() {
        fluctuate($(this));
    });
}
$(".soundBar").each(function(i) {
    fluctuate($(this));
});

The Result…

Written by Oli Yeates

CEO/Founder

Follow Oli on Twitter