Another take on my flexbox fullscreen overlay navigation. Spicing things up with a bit of Velocity.js
Created
January 12, 2018 22:28
-
-
Save sarahbohr/4e1d47e84d6568e492a7537cfcfdf3d5 to your computer and use it in GitHub Desktop.
Velocity.js fullscreen flexbox overlay navigation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section class="home"> | |
<div class="open-overlay"> | |
<span class="bar-top"></span> | |
<span class="bar-middle"></span> | |
<span class="bar-bottom"></span> | |
</div> | |
</section> | |
<div class="overlay-navigation"> | |
<nav role="navigation"> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Skills</a></li> | |
<li><a href="#">Works</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
</nav> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('.open-overlay').click(function() { | |
$('.open-overlay').css('pointer-events', 'none'); | |
var overlay_navigation = $('.overlay-navigation'), | |
top_bar = $('.bar-top'), | |
middle_bar = $('.bar-middle'), | |
bottom_bar = $('.bar-bottom'); | |
overlay_navigation.toggleClass('overlay-active'); | |
if (overlay_navigation.hasClass('overlay-active')) { | |
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar'); | |
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar'); | |
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar'); | |
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down') | |
overlay_navigation.velocity('transition.slideLeftIn', { | |
duration: 300, | |
delay: 0, | |
begin: function() { | |
$('nav ul li').velocity('transition.perspectiveLeftIn', { | |
stagger: 150, | |
delay: 0, | |
complete: function() { | |
$('nav ul li a').velocity({ | |
opacity: [1, 0], | |
}, { | |
delay: 10, | |
duration: 140 | |
}); | |
$('.open-overlay').css('pointer-events', 'auto'); | |
} | |
}) | |
} | |
}) | |
} else { | |
$('.open-overlay').css('pointer-events', 'none'); | |
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar'); | |
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar'); | |
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar'); | |
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up') | |
$('nav ul li').velocity('transition.perspectiveRightOut', { | |
stagger: 150, | |
delay: 0, | |
complete: function() { | |
overlay_navigation.velocity('transition.fadeOut', { | |
delay: 0, | |
duration: 300, | |
complete: function() { | |
$('nav ul li a').velocity({ | |
opacity: [0, 1], | |
}, { | |
delay: 0, | |
duration: 50 | |
}); | |
$('.open-overlay').css('pointer-events', 'auto'); | |
} | |
}); | |
} | |
}) | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.ui.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic|Open+Sans+Condensed); | |
body { | |
background-color: #000 | |
} | |
.home { | |
width: 100%; | |
height: 100vh; | |
position: relative; | |
background-size: cover; | |
background-position: center center; | |
} | |
/* ==================================== | |
Navigation | |
==================================== */ | |
.overlay-navigation { | |
position: fixed; | |
z-index: 99; | |
top: 0; | |
left: 33%; | |
width: 60%; | |
height: 20%; | |
background-color: hsla(0, 0%, 100%, 0.2); | |
display: none; | |
opacity: 0; | |
} | |
nav, | |
nav ul { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
nav ul { | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
list-style: none; | |
} | |
nav ul li { | |
flex-basis: 40%; | |
justify-content: center; | |
align-items: center; | |
height: 100%; | |
overflow: hidden; | |
opacity: 0; | |
} | |
nav li a { | |
position: relative; | |
top: 46%; | |
color: #fff; | |
text-transform: uppercase; | |
font-family: 'Work sans', sans-serif; | |
font-weight: 300; | |
letter-spacing: 4px; | |
text-decoration: none; | |
display: block; | |
text-align: center; | |
font-size: 0.9rem; | |
opacity: 0; | |
} | |
nav li a:before { | |
content: ''; | |
width: 22px; | |
height: 2px; | |
background-color: #fff; | |
position: absolute; | |
top: 50%; | |
left: 0; | |
z-index: 100; | |
-webkit-transform: translateX(-100%); | |
-ms-transform: translateX(-100%); | |
transform: translateX(-100%); | |
opacity: 0; | |
-webkit-transition: all .2s linear; | |
transition: all .2s linear; | |
} | |
nav li a:after { | |
content: attr(data-content); | |
font-size: 0.7rem; | |
-webkit-transition: all .2s linear; | |
transition: all .2s linear; | |
opacity: 0; | |
position: absolute; | |
z-index: 100; | |
color: #fff; | |
display: block; | |
margin-right: auto; | |
margin-left: auto; | |
left: 0; | |
right: 0; | |
bottom: -50px; | |
text-transform: none; | |
font-family: 'Open sans', sans-serif; | |
font-weight: 300; | |
font-style: italic; | |
letter-spacing: 0; | |
} | |
nav li a:hover { | |
color: #4682B4; | |
text-shadow: 1px 1px 2px #000; | |
} | |
/* nav li a:hover:after { | |
-webkit-transform: translateY(15px); | |
-ms-transform: translateY(15px); | |
transform: translateY(15px); | |
opacity: 1; | |
} | |
*/ | |
nav li:nth-of-type(1) { | |
background-color: #303030 | |
} | |
nav li:nth-of-type(2) { | |
background-color: #484848 | |
} | |
nav li:nth-of-type(3) { | |
background-color: #606060 | |
} | |
nav li:nth-of-type(4) { | |
background-color: #707070 | |
} | |
nav li:nth-of-type(5) { | |
background-color: #787878 | |
} | |
/* ==================================== | |
Burger king | |
==================================== */ | |
.open-overlay { | |
position: absolute; | |
right: 2rem; | |
top: 1rem; | |
z-index: 100; | |
width: 34px; | |
display: block; | |
cursor: pointer; | |
} | |
.open-overlay span { | |
display: block; | |
height: 1px; | |
background-color: #fff; | |
cursor: pointer; | |
margin-top: 8px; | |
} | |
.animate-top-bar { | |
-webkit-animation: animate-top-bar .6s linear 1 both; | |
animation: animate-top-bar .6s linear 1 both | |
} | |
.animate-bottom-bar { | |
-webkit-animation: animate-bottom-bar .6s linear 1 both; | |
animation: animate-bottom-bar .6s linear 1 both | |
} | |
.animate-middle-bar { | |
-webkit-animation: animate-middle-bar .6s linear 1 both; | |
animation: animate-middle-bar .6s linear 1 both | |
} | |
.animate-out-top-bar { | |
-webkit-animation: animate-out-top-bar .6s linear 1 both; | |
animation: animate-out-top-bar .6s linear 1 both | |
} | |
.animate-out-bottom-bar { | |
-webkit-animation: animate-out-bottom-bar .6s linear 1 both; | |
animation: animate-out-bottom-bar .6s linear 1 both | |
} | |
.animate-out-middle-bar { | |
-webkit-animation: animate-out-middle-bar .6s linear 1 both; | |
animation: animate-out-middle-bar .6s linear 1 both | |
} | |
/* ==================================== | |
Animation keyframes | |
==================================== */ | |
@keyframes animate-top-bar { | |
0% { | |
background-color: #fff; | |
} | |
50% { | |
-webkit-transform: translateY(9px); | |
transform: translateY(9px) | |
} | |
80% { | |
-webkit-transform: translateY(5px); | |
transform: translateY(5px); | |
background-color: #fff | |
} | |
100% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
background-color: #29363B; | |
} | |
} | |
@keyframes animate-bottom-bar { | |
0% { | |
background-color: #fff; | |
} | |
50% { | |
-webkit-transform: translateY(-9px); | |
transform: translateY(-9px) | |
} | |
80% { | |
-webkit-transform: translateY(-5px); | |
transform: translateY(-5px); | |
background-color: #fff; | |
} | |
100% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
background-color: #29363B; | |
} | |
} | |
@keyframes animate-middle-bar { | |
0% { | |
background-color: #fff; | |
} | |
80% { | |
background-color: #fff; | |
} | |
100% { | |
background-color: #29363B; | |
} | |
} | |
@keyframes animate-out-top-bar { | |
0% { | |
background-color: #29363B | |
} | |
50% { | |
-webkit-transform: translateY(9px); | |
transform: translateY(9px) | |
} | |
80% { | |
-webkit-transform: translateY(5px); | |
transform: translateY(5px); | |
background-color: #29363B | |
} | |
100% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
background-color: #FFF; | |
} | |
} | |
@keyframes animate-out-bottom-bar { | |
0% { | |
background-color: #29363B | |
} | |
50% { | |
-webkit-transform: translateY(-9px); | |
transform: translateY(-9px) | |
} | |
80% { | |
-webkit-transform: translateY(-5px); | |
transform: translateY(-5px); | |
background-color: #29363B; | |
} | |
100% { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
background-color: #FFF; | |
} | |
} | |
@keyframes animate-out-middle-bar { | |
0% { | |
background-color: #29363B | |
} | |
80% { | |
background-color: #29363B; | |
} | |
100% { | |
background-color: #fff; | |
} | |
} | |
.home a { | |
font-family: "Work Sans", sans-serif; | |
color: #222; | |
font-weight: 300; | |
font-size: 12px; | |
text-transform: uppercase; | |
text-decoration: none; | |
position: absolute; | |
z-index: 10; | |
top: 50px; | |
left: 50px; | |
padding-bottom: 3px; | |
border-bottom: 1px solid #222; | |
} | |
@media (max-width: 640px) { | |
nav ul { | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-webkit-flex-direction: column; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
} | |
nav ul li { | |
height: 20%; | |
} | |
nav ul li a { | |
font-size: 11px; | |
} | |
nav li a:after { | |
font-size: 0.6rem; | |
bottom: -25px; | |
} | |
nav li a:hover:after { | |
transform: translateY(0); | |
} | |
.open-overlay { | |
right: 1rem; | |
} | |
nav li a:before { | |
width: 25px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment