body {
margin: 0;
width: 100vw;
height: 100vh;
display: flex;
}
.colors {
position: relative;
width: 33.33%;
height: 100%;
display: flex;
overflow: hidden;
cursor: pointer;
transition: all 300ms ease-in-out;
h1 {
position: relative;
top: 90px;
right: 10px;
font-family: Contrail One;
font-size: 13em;
transform: rotate(-45deg);
margin: auto;
}
}
.one {
background: #f22c21;
h1 {
color: #f8fcde;
}
}
.two {
left: 0;
background: #f8fcde;
-webkit-box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
-moz-box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
h1 {
color: #f22c21;
}
}
.three {
left: 0;
background: #202021;
-webkit-box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
-moz-box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
h1 {
color: #f8fcde;
}
}
.one-reveal {
left: 25%;
}
.two-reveal {
left: -25%;
}
.three-reveal {
left: -25%;
}
View Compiled
const one = document.querySelector('.one');
const two = document.querySelector('.two');
const three = document.querySelector('.three');
one.addEventListener('click', () => {
two.classList.toggle('one-reveal')
})
two.addEventListener('click', () => {
two.classList.toggle('two-reveal')
})
three.addEventListener('click', () => {
three.classList.toggle('three-reveal')
})