Skip to content

Instantly share code, notes, and snippets.

@tilomitra

tilomitra/YUI-Animated-Panel-CSS.html

Created June 22, 2011 01:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tilomitra/1039371 to your computer and use it in GitHub Desktop.
Save tilomitra/1039371 to your computer and use it in GitHub Desktop.
Download ZIP
A basic implementation on how to make a sliding panel using CSS Transitions and YUI3.3.0, a la Twitter.
Raw
YUI-Animated-Panel-CSS.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="viewport" content="width=device-width,maximum-scale=1.0" />
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="https://raw.github.com/joehewitt/scrollability/master/scrollability-min.js"></script>
<style>
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", sans-serif;
line-height:24px;
color:#333;
}
.yui3-overlay {
background:white;
-webkit-box-shadow: 0px 0px 10px #666;
background:#D3E5F5;
color: #0D2E4A;
font-size:14px;
top:0;
}
.yui3-overlay-content {
padding:15px;
}
.translate-3d.slideIn {
-webkit-animation-name: translate3dslideIn;
-webkit-transform-origin: 50% 50%;
}
.translate-3d.slideOut {
-webkit-animation-name: translate3dslideOut;
-webkit-transform-origin: 50% 50%;
}
.slideIn, .slideOut {
-webkit-animation-duration: 0.2s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 0 0;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes translate3dslideIn {
from {
-webkit-transform: translate3d(0, 0, 0);
opacity: 0;
}
to {
-webkit-transform: translate3d(-500px, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes translate3dslideOut {
from {
-webkit-transform: translate3d(-500px, 0, 0);
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="overlay" class="scrollable vertical">
<P>Aliquam molestie est non lacus gravida rhoncus ac eu enim. Pellentesque vel magna metus, sit amet scelerisque augue. Nulla facilisi. Pellentesque rutrum lacinia felis, quis sagittis nisl porta tempus. Mauris eu ultricies justo. Proin eleifend varius nisi, eget accumsan quam aliquam id. Aenean ut est vel sem blandit ultrices. Proin mi mi, laoreet eget pulvinar luctus, tincidunt at eros. Duis eget lacus vitae odio porttitor commodo ultrices at mi. Phasellus consectetur velit ut eros sagittis placerat. Praesent sodales erat ut erat faucibus consequat. Fusce pretium mattis tincidunt. Pellentesque velit nisi, consectetur sed vestibulum eget, congue at libero. Donec ac leo tortor, at fringilla turpis.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi nulla, suscipit ut pretium eget, mollis a ligula. Duis mi massa, mollis sed pretium eget, porttitor id sapien. Nam ac laoreet odio. Nulla massa lorem, posuere id commodo quis, tristique sit amet diam. Cras lacinia tincidunt ante, ut facilisis quam tempor vestibulum. Donec quis orci in tortor tempus condimentum. Proin ut aliquet mauris. Sed in enim sapien. Nulla nisl odio, venenatis in adipiscing non, placerat eget leo. Aliquam ut mi elit, ac imperdiet turpis.</p>
<p>Pellentesque condimentum eros sed elit gravida sodales. Quisque porta aliquam mattis. Suspendisse potenti. Mauris ac mi est. Vivamus ut nisi elit, ut imperdiet massa. In sit amet malesuada nunc. Nulla facilisi. Nam euismod tincidunt nisl at porttitor. In ultrices lobortis arcu, et feugiat metus laoreet eget. Cras est ipsum, tristique non convallis sed, imperdiet at dui. Ut fermentum ante non risus feugiat nec accumsan turpis tincidunt. In pulvinar ultricies suscipit. Cras ac consectetur dui. Ut vel urna a arcu pellentesque auctor et sit amet magna. Praesent et mauris lorem, eget sodales ligula.</p>
<p>Nulla rutrum faucibus enim, ut egestas neque laoreet iaculis. Aenean vulputate ultrices nibh nec porttitor. Donec elementum massa est, nec condimentum augue. Aenean a sem nisl, eget dictum velit. Nunc eget orci libero, ut pharetra massa. Sed eget luctus lectus. Vivamus auctor vulputate augue, a venenatis lectus luctus ut. Sed feugiat enim volutpat mi posuere rhoncus. Nam imperdiet lorem non erat posuere bibendum. Donec urna odio, adipiscing in euismod eget, eleifend ac velit. Donec faucibus purus ut nisi ultricies id vehicula orci feugiat. Aliquam facilisis eros non arcu faucibus posuere id at lacus. Proin dapibus velit et ipsum bibendum ut porta nibh elementum. Cras sed turpis eros, eu pretium magna. Nulla eu nunc sed nibh aliquam cursus. Duis at sapien id nisl viverra gravida. Phasellus ipsum arcu, aliquam sit amet fringilla et, elementum eu magna. In id leo risus, sed faucibus augue.</p>
<input type="button" value="Open Panel" id="openPanel"/>
<script>
YUI().use('overlay', function(Y) {
var DURATION = 0.2;
var overlay = new Y.Overlay({
srcNode: "#overlay",
width:400,
height:768,
visible:true,
xy:[1200,0]
});
overlay.get('boundingBox').setStyle('opacity', 0);
overlay.render();
Y.one('#openPanel').on('click', function(e) {
if (overlay.get('boundingBox').hasClass('slideIn')) {
overlay.get('boundingBox').removeClass('slideIn').addClass('slideOut');
}
else {
overlay.get('boundingBox').removeClass('translate-3d slideOut').addClass('translate-3d slideIn');
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment