Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save smiller4/570585a758bd2e29e6b3 to your computer and use it in GitHub Desktop.
Save smiller4/570585a758bd2e29e6b3 to your computer and use it in GitHub Desktop.
<header class="center">
<a class="open" href="#">Open my drawer!</a>
</header>
<div class="drawer-out">
<div class="drawer">
<div class="container">
<div class="row">
<div class="col-sm-6">
<form role="form">
<legend>Something</legend>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Social -->
<div class="col-sm-6">
<form action="">
<legend>Social</legend>
<div class="form-group">
<a href="#" class="zocial-facebook"></a>
<a href="#" class="zocial-twitter"></a>
<a href="#" class="zocial-googleplus"></a>
<a href="#" class="zocial-vimeo"></a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="content center">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Cool CSS3 Animated Drawer</h1>
<p class="lead">Click on the button above to show the animated drawer</p>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12">Footer</div>
</div>
</div>
</footer>
$("a").click(function (event) {
event.preventDefault();
$(".drawer-out").toggleClass("opencan");
});
// Core
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
background: #e0eafd;
line-height: 50px;
font-size: 14px;
color: #92a5bf;
text-align: left;
font-family: 'Whitney', sans-serif;}
// Additional Helper Class
.center {
text-align: center !important;}
// Override Included Pen
a {
margin-top: 0;
&:hover {
color: white;
text-decoration: none;
}
}
// For Bootstrap
.container {
padding: 30px 0;
text-align: left;
}
header {
float: left;
width: 100%;
height: 80px;
background: #1ba0eb;
color: #fff;
z-index: 900;
padding: 0;
text-align: left;
a.open {
color: #fff;
width: auto;
height: auto;
font-weight: bold;
line-height: 18px;
padding: 12px 12px;
background: lighten(#1ba0eb, 15%);
box-shadow: inset 0px -2px 0px darken(#1ba0eb, 4%);
border-radius: 5px;
text-decoration: none;
margin: 18px 0;
display: inline-block;
}
}
.drawer-out {
float: left;
height: 0px;
width: 100%;
background: #333;
overflow: hidden;
position: relative;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
// Drawer
.drawer {
float: left;
width: 100%;
height: 300px;
background: #fff;
opacity: 0;
-webkit-transform: perspective(250px) rotateX(90deg);
transform: perspective(250px) rotateX(90deg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
&.opencan {
height: 300px;
// Drawer
.drawer {
opacity: 1;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: scale(1) perspective(1000px) rotateX(0deg);
-webkit-animation: out 0.75s ease forwards;
-moz-animation: out 0.75s ease forwards;
animation: out 0.75s ease forwards;
}
}
}
@-webkit-keyframes out {
0% {
-webkit-transform: scale(0.8) perspective(1000px) rotateX(90deg);
transform: scale(0.8) perspective(1000px) rotateX(90deg);
}
100% {
-webkit-transform: scale(1) perspective(1000px) rotateX(0deg);
transform: scale(1) perspective(1000px) rotateX(0deg);
}
}
@-moz-keyframes out {
0% { -moz-transform: scale(0.8) perspective(1000px) rotateX(90deg);}
100% { -moz-transform: scale(1) perspective(1000px) rotateX(0deg);}
}
@keyframes out {
0% {
-webkit-transform: scale(0.8) perspective(1000px) rotateX(90deg);
transform: scale(0.8) perspective(1000px) rotateX(90deg);
}
100% {
-webkit-transform: scale(1) perspective(1000px) rotateX(0deg);
transform: scale(1) perspective(1000px) rotateX(0deg);
}
}
.content {
float: left;
clear: both;
height: 1400px; // Testing
width: 100%;}
footer {
float: left;
clear: both;
width: 100%;
height: 120px;
text-align: center;
background: #333;}
p {
font-size: 16px;
opacity: 1;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment