Skip to content

Instantly share code, notes, and snippets.

@betul
Created January 31, 2014 10:30
Show Gist options
  • Select an option

  • Save betul/8729755 to your computer and use it in GitHub Desktop.

Select an option

Save betul/8729755 to your computer and use it in GitHub Desktop.
A Pen by Bennett Feely.
<a>Home</a><a>Articles</a><a>Videos</a><a>Gallery</a><a>Contact</a>
$("a").click(function(){
$(this).parent().addClass("full-page");
$(this).addClass("clicked");
setTimeout(function(){
$(".full-page").removeClass("full-page");
$("a").removeClass("clicked");
}, 1500);
});
@import "compass";
@import url(http://fonts.googleapis.com/css?family=Rambla:400,700,400italic);
$white : #F2F2F2;
$blue : #4285F4;
$black : #373737;
$size : 2rem;
$transition : .5s;
$transition-easing-function : cubic-bezier(.2,.7,.3,1.4);
body { background: #E7E6DD; }
html, body {
position: relative;
height: 100%;
}
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 1rem;
}
a {
display: inline-block;
font: $size "Rambla";
line-height: 1.5;
color: $black;
overflow: hidden;
cursor: pointer;
transition: $transition $transition-easing-function;
width: 25%;
border-bottom: medium solid transparent;
user-select: none;
&:hover,
&.clicked {
color: $blue;
border-bottom: medium solid $blue;
transition: $transition/1.5;
transform: translate3d(0,-5%,0)
}
&:active {
transform: scale3d(.9,.9,.9);
opacity: .8;
transition: 0;
}
&.clicked {
transform: scale3d(1.25,1.25,1.25);
transform-origin: center bottom;
}
}
.full-page a:not(.clicked) {
width: 0;
transform: scale3d(0.01,0.01,0.01);
}
.scale a.clicked {
transform: scale3d(1.3,1.3,1.3);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment