FiFo - Active logo

by Paulo Ávila

HTML

<div class="logo">
    <div class="bars">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <div class="arrow">
        
    </div>
</div>

CSS

.logo { position: relative; }
.bars { position: absolute; display: inline-block; width: 200px; height: 200px; background-color: #1a1915; }
.arrow { position: absolute; }

.bar { position: absolute; width: 59px; height: 200px; opacity: .7; }
.bar:nth-child(4) { left: 0; background-color: #f64836; } /* red */
.bar:nth-child(3) { left: 47px; background-color: #f6d436; } /* yellow */
.bar:nth-child(2) { left: 94px; background-color: #527514; } /* green */
.bar:nth-child(1) { right: 0; background-color: #36c2f6; } /* blue */

.bar { -webkit-transition: all 280ms; }

.bar:nth-child(4).animate,
.bar:nth-child(4):hover { width: 67px; }
.bar:nth-child(3).animate,
.bar:nth-child(3):hover { -webkit-transform: scaleX(1.2) translateX(-9px); }
.bar:nth-child(2).animate,
.bar:nth-child(2):hover { -webkit-transform: scaleX(1.2) translateX(8px); }
.bar:nth-child(1).animate,
.bar:nth-child(1):hover { width: 68px; }

JavaScript

var bars = $('.bar'),
    totalBars = bars.length,
    minMS = 800, // 120
    maxMS = 1200; // 200

(function interval() {
    var randomMSEnd = (minMS + (Math.random() * maxMS)) | 0,
        randomMSStart = (minMS + (Math.random() * maxMS)) | 0,
        randomBar = ((1 + (Math.random() * totalBars)) - 1) | 0,
        selectedBar = bars.eq(randomBar);

    //console.log(randomBar, randomMSEnd, randomMSStart);

    // start an animation and remove it at a random time in the future
    selectedBar.addClass('animate');
    setTimeout(function () {
        selectedBar.removeClass('animate');
    }, randomMSEnd);

    // when the next animation should begin
    setTimeout(interval, randomMSStart);
}())