<a href="#" class="btn">Transition</a>
<div class="overlay">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
$teal: #8ba3b9;
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
overflow: hidden;
}
.btn {
position: absolute;
bottom: 0;
left: 50%;
padding: 1rem;
font-size: 2rem;
color: $teal;
text-decoration: none;
background: white;
border: solid mix(white, $teal, 25%);
border-width: 1px 1px 0;
transform: translateX(-50%);
z-index: 99;
}
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&.show {
.bar {
transform: scale(1, 1)
translate3d(0,0,0);
transform-origin: 0 0;
}
}
.bar {
position: absolute;
width: 10.1vw;
background: $teal;
top: 0;
bottom: 0;
transform: scale(0, 1)
translate3d(0,0,0);
transform-origin: 100% 100%;
transition: transform 0.5s ease-in-out;
border-left: 1px solid mix(white, $teal, 25%);
&:first-of-type {
border-left: none;
}
$light: $teal;
$dark: mix(black, $teal, 5%);
@for $x from 1 through 10 {
&:nth-of-type(#{$x}) {
left: ($x - 1) * 10vw;
background: linear-gradient(to right, $light 0%, $dark 100%);
transition-delay: 0.05s * $x;
}
$light: $dark;
$dark: mix(black, $teal, ($x * 5%));
}
}
}
View Compiled
$('.btn').click(function(e) {
e.preventDefault();
$('.overlay').toggleClass('show');
});
This Pen doesn't use any external CSS resources.