Interaction Jazz

Sorry, this code snippet failed to load, 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));
		}
	}
}