Monome node CSS test.

by razh

HTML

<div class="node"></div>
<div class="node on"></div>
<div class="node active"></div>

CSS

body {
    background: black;
}

.node {
    float: left;
    
    width: 100px;
    height: 100px;
    margin: 10px;
    
    // border: 1px solid black;
    border-radius: 10px;
    
    transition: all 0.1s ease-in-out;
    transition: background 0.3s;

    background: gray;
    box-shadow: inset 0 0 10px black;
    
    z-index: 0;
}

.on {
    background: white;
    z-index: 1;
}

.active {
    background: hsl(10, 90%, 70%);
    box-shadow: inset 0 0 30px hsl(10, 90%, 40%), 0 0 30px red, 0 0 40px red;
    z-index: 1;
}

JavaScript

var $nodes = $('.node');

$nodes.click(function() {
    $(this).toggleClass('on');
});

var index = 0;
setInterval(function() {
    $nodes.eq(index).removeClass('active');
    
    index++;
    index %= 3;
    
    var $child = $nodes.eq(index);
    
    if ($child.hasClass('on')) {
        $child.addClass('active');
    }
}, 500);