color boxes

by phloe

HTML

<div class="box-container">
	<div class="box box--secondary box--white"></div>
	<div class="box box--secondary box--black"></div>
	<div class="box box--secondary box--blue"></div>
	<div class="box box--primary box--red"></div>
</div>

<div class="box2-container">
	<div class="box2 box2--secondary box2--white"></div>
	<div class="box2 box2--secondary box2--black"></div>
	<div class="box2 box2--secondary box2--blue"></div>
	<div class="box2 box2--primary box2--red"></div>
</div>

CSS

body {
	background: #EEE url("data:image/svg+xml;charset=UTF-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='.5' opacity='.5' /%3E%3C/svg%3E") 10px 10px;
	margin: 0;
}
.box-container {
	overflow: hidden;
	display: block;
	clear: both;
	margin: 20px;
}
.box {
	float: left;
	width: 80px;
	height: 80px;
	--mask-position: 50%;
	--mask-angle: -135deg;
	transition: margin-left .2s ease;
	position: relative;
	overflow: hidden;
	pointer-events: none;
}

.box::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bg-color);
	transform: scale(1.4142135623730951) rotate(var(--mask-angle)) translateY(0%);
	transition: transform .2s ease;
	pointer-events: auto;
}

.box--collapsed {
	/*-webkit-mask-image: linear-gradient(var(--mask-angle), rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) var(--mask-position, 50%), rgba(0, 0, 0, 0) var(--mask-position, 50%), rgba(0, 0, 0, 0) 100%);
	*/
	margin-left: -80px;
}

.box--collapsed:after {
	transform: scale(1.4142135623730951) rotate(var(--mask-angle)) translateY(calc(100% - var(--mask-position, 0%)));
}

.box--white {
	--bg-color: white;
	--mask-position: 100%;
	z-index: 1;
	margin-left: 0 !important;
}

.box--black {
	--bg-color: black;
	--mask-position: 50%;
	z-index: 2;
	transition-delay: 0s;
}
.box--black:after {
	transition-delay: 0s;
}
.box--black.box--collapsed {
	transition-delay: .4s;
}
.box--black.box--collapsed:after {
	transition-delay: .4s;
}

.box--blue {
	--bg-color: blue;
	--mask-position: 25%;
	transition-delay: .2s;
	z-index: 3;
}
.box--blue:after {
	transition-delay: .2s;
}
.box--blue.box--collapsed {
	transition-delay: .2s;
}
.box--blue.box--collapsed:after {
	transition-delay: .2s;
}
.box--red {
	--bg-color: red;
	transition-delay: .4s;
}
.box--red:after {
	transition-delay: .4s;
}
.box--red.box--collapsed {
	transition-delay: 0s;
}
.box--red.box--collapsed:after {
	transition-delay:...

JavaScript

(function () {
	let collapsed;
	const boxes = [...document.querySelectorAll(".box")];
	boxes.forEach(
		(box) => {
			box.addEventListener("click", () => {
				collapsed = !collapsed;
				if (collapsed) {
					boxes.forEach((box) => box.classList.add("box--collapsed"));
				}
				else {
					boxes.forEach((box) => box.classList.remove("box--collapsed"));
				}
			});
		}
	);
} ());

(function () {
	let collapsed;
	const container = document.querySelector(".box2-container");
	const boxes = [...document.querySelectorAll(".box2")];
	boxes.forEach(
		(box) => {
			box.addEventListener("click", () => {
				collapsed = !collapsed;
				if (collapsed) {
					container.classList.add("box2-container--collapsed");
					boxes.forEach((box) => box.classList.add("box2--collapsed"));
				}
				else {
					container.classList.remove("box2-container--collapsed");
					boxes.forEach((box) => box.classList.remove("box2--collapsed"));
				}
			});
		}
	);
} ());