<div class="panels">
<div class="panel panel1">
<p>Ideate</p>
<p>Make</p>
<p>Iterate</p>
</div>
<div class="panel panel2">
<p>Get</p>
<p>Some</p>
<p>Feedback</p>
</div>
<div class="panel panel3">
<p>Don't Let</p>
<p>Shit</p>
<p>Slow You Down</p>
</div>
<div class="panel panel4">
<p>failures</p>
<p>Happen</p>
<p>so improve</p>
</div>
<div class="panel panel5">
<p>Be Accountable</p>
<p>Today</p>
<p>and Right now</p>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
html {
box-sizing: border-box;
background: #f2f2f2;
font-family: "Roboto Mono", monospace;
font-size: 20px;
font-weight: 200;
}
body {
margin: 0;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
.panels {
min-height: 100vh;
overflow: hidden;
display: flex;
}
.panel {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
text-align: center;
align-items: center;
transition: font-size 0.5s ease-out, flex 0.5s ease-out, background 0.2s;
font-size: 20px;
position: relative;
&:before,
&:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background-size: cover;
background-position: center;
transition: all 0.2s ease;
}
&:before {
background: rgba(0, 0, 0, 0.1);
}
&:after {
z-index: -1;
filter: grayscale(100%);
}
&.active {
flex: 5;
}
}
.panel1:after {
background-image: url(https://source.unsplash.com/w2MJFJffb-0/1500x1500);
}
.panel2:after {
background-image: url(https://source.unsplash.com/DsH1NbAxEec/1500x1500);
}
.panel3:after {
background-image: url(https://source.unsplash.com/Y5BD-H9qGvs/1500x1500);
}
.panel4:after {
background-image: url(https://source.unsplash.com/5YM26lUicfU/1500x1500);
}
.panel5:after {
background-image: url(https://source.unsplash.com/URINjM2UV4A/1500x1500);
}
.panel {
> * {
margin: 0;
width: 100%;
transition: transform 0.5s;
flex: 1 0 auto;
display: flex;
justify-content: center;
align-items: center;
&:first-child {
transform: translateY(-100%);
}
}
&.open {
> *:first-child,
> *:last-child {
transform: translateY(0);
}
}
> *:last-child {
transform: translateY(100%);
}
p {
text-transform: lowercase;
letter-spacing: 0.2em;
font-size: 0.6em;
&:nth-child(2) {
font-size: 1em;
position: relative;
z-index: 1;
&:before {
content: "";
display: block;
background: #222;
position: absolute;
height: 2em;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: -1;
right: 0;
opacity: 0.5;
transition: all 0.2s ease;
}
}
}
&.active {
font-size: 40px;
&:before {
background: rgba(0, 0, 0, 0.9);
}
p:nth-child(2):before {
opacity: 0;
}
}
}
View Compiled
const panels = document.querySelectorAll(".panel");
function toggleOpen() {
if ([this.classList].indexOf("active") >= 0) {
this.classList.remove("active");
return;
}
panels.forEach(panel => panel.classList.remove("active"));
this.classList.toggle("active");
}
function toggleActive(e) {
if (e.propertyName.includes("flex")) {
this.classList.toggle("open");
}
}
panels.forEach(panel => {
panel.addEventListener("click", toggleOpen);
panel.addEventListener("transitionend", toggleActive);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.