<main class="main">
<section class="section">
<div class="close-section">×</div>
<div class="demo-box">Section 1</div>
</section>
<section class="section">
<div class="close-section">×</div>
<div class="demo-box">Section 2</div>
</section>
<section class="section">
<div class="close-section">×</div>
<div class="demo-box">Section 3</div>
</section>
<section class="section">
<div class="close-section">×</div>
<div class="demo-box">Section 4</div>
</section>
</main>
// Variables
//
$section-class: 'section';
$section-expanded-class: 'is-expanded';
$section-has-expanded-class: 'has-expanded-item';
$section-colors: #F06060, #FA987D, #72CCA7, #10A296;
$section-transition-property: all;
$section-transition-duration: 500ms;
$section-transition-timing-function: cubic-bezier(.4,0,.2,1);
// Component Styles
//
.#{$section-class} {
position: absolute;
z-index: 0;
width: 50%;
height: 50%;
overflow: hidden;
cursor: pointer;
transform: scale(1);
will-change: transform, contents;
transition-property: $section-transition-property;
transition-duration: $section-transition-duration;
transition-timing-function: $section-transition-timing-function;
&:nth-child(1) {
top: 0;
left: 0;
background: nth($section-colors, 1);
}
&:nth-child(2) {
top: 0;
left: 50%;
background: nth($section-colors, 2);
}
&:nth-child(3) {
top: 50%;
left: 0;
background: nth($section-colors, 3);
}
&:nth-child(4) {
top: 50%;
left: 50%;
background: nth($section-colors, 4);
}
&.#{$section-expanded-class} {
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
cursor: initial;
}
.#{$section-has-expanded-class} &:not(.#{$section-expanded-class}) {
transform: scale(0);
}
}
.close-section {
position: absolute;
top: 0;
right: 0;
display: flex;
width: 3rem;
height: 3rem;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 2rem;
text-align: center;
color: #fff;
opacity: 0;
cursor: pointer;
pointer-events: none;
transition: opacity 150ms linear;
will-change: opacity;
.#{$section-class}.#{$section-expanded-class} & {
opacity: 1;
transition-delay: $section-transition-duration;
pointer-events: initial;
}
}
// ===========
// Demo Styles
// ===========
* {
box-sizing: border-box;
}
html {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body {
margin: 0;
font: 16px/1.5 'Roboto Slab', sans-serif;
background: #000;
}
.demo-box {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
color: #fff;
font-size: 2rem;
font-weight: 300;
}
View Compiled
const Boxlayout = (() => {
const wrapper = document.body,
sections = [...document.querySelectorAll(".section")],
closeButtons = [...document.querySelectorAll(".close-section")],
expandedClass = "is-expanded",
hasExpandedClass = "has-expanded-item";
const initEvents = () => {
sections.forEach((element) => {
element.addEventListener("click", () => openSection(element));
});
closeButtons.forEach((element) => {
element.addEventListener("click", (event) => {
event.stopPropagation();
closeSection(element.parentElement);
});
});
};
const openSection = (element) => {
if (!element.classList.contains(expandedClass)) {
element.classList.add(expandedClass);
wrapper.classList.add(hasExpandedClass);
}
};
const closeSection = (element) => {
if (element.classList.contains(expandedClass)) {
element.classList.remove(expandedClass);
wrapper.classList.remove(hasExpandedClass);
}
};
return { init: initEvents };
})();
Boxlayout.init();
This Pen doesn't use any external JavaScript resources.