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));
});