Interaction Jazz

Sorry, this code snippet embed requires JavaScript, but you can still check it out over on CodePen!

- (1...51).each do |row|
    - (1...51).each do |column|
        %div{:class => "slice  row-#{row}  column-#{column}"}
.jazz

@function range-map($value, $ranges...) {
    $old-minimum: if(length($ranges) == 2, 0, nth($ranges, 1));
    $old-maximum: if(length($ranges) == 2, nth($ranges, 1), nth($ranges, 2));
    $new-minimum: if(length($ranges) == 2, 0, nth($ranges, 3));
    $new-maximum: if(length($ranges) == 2, nth($ranges, 2), nth($ranges, 4));

    @return ($value - $old-minimum) / ($old-maximum - $old-minimum) * ($new-maximum - $new-minimum) + $new-minimum;
}

$hue-rotation: -75;

.jazz {
    background-color: purple;
    background-color: rebeccapurple;
    width: 400px;
    width: 60vmin;
    height: 400px;
    height: 60vmin;
    z-index: 1;
}

.slice {
    width: 2%;
    height: 2%;
    position: absolute;
    z-index: 2;
}

@for $i from 1 through 50 {
    .row-#{$i} {
        top: range-map($i, 1, 50, 0%, 98%);

        &:hover ~ .jazz {
            background-color: adjust-hue(purple, range-map($i, 1, 50, -180, 180));
            background-color: adjust-hue(rebeccapurple, range-map($i, 1, 50, -180, 180));
        }
    }

    .column-#{$i} {
        left: range-map($i, 1, 50, 0%, 98%);

        &:hover ~ .jazz {
            border-radius: range-map($i, 1, 50, 0%, 50%);
            transform: rotateZ(range-map($i, 1, 50, 0deg, 360deg));
        }
    }
}