Interaction Jazz

This code snippet was published on .

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