Permalink
Browse files

initial commit

  • Loading branch information...
0 parents commit 7b8485d2fcacd5dcc64e1cc2dfc2e5a91b20eff0 @hakimel hakimel committed Aug 5, 2012
Showing with 337 additions and 0 deletions.
  1. +19 −0 LICENSE
  2. +11 −0 README.md
  3. +52 −0 css/demo.css
  4. +155 −0 css/meny.css
  5. +61 −0 index.html
  6. +39 −0 js/meny.js
19 LICENSE
@@ -0,0 +1,19 @@
+Copyright (C) 2011 Hakim El Hattab, http://hakim.se
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
@@ -0,0 +1,11 @@
+# forkit.js
+
+An experimental animated ribbon which reveals a curtain of additional content.
+
+Curious about how this looks in action? [Check out the demo page](http://lab.hakim.se/forkit-js/).
+
+# License
+
+MIT licensed
+
+Copyright (C) 2012 Hakim El Hattab, http://hakim.se

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,155 @@
+
+/**
+ *
+ */
+
+html, body {
+ height: 100%;
+}
+
+body {
+ background-color: #222;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
+ background-repeat: repeat;
+
+ font-family: 'Lato', Times, 'Times New Roman', serif;
+ font-size: 16px;
+ color: #222;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ color: #c2575b;
+ text-decoration: none;
+
+ -webkit-transition: 0.15s color ease;
+ -moz-transition: 0.15s color ease;
+ -ms-transition: 0.15s color ease;
+ -o-transition: 0.15s color ease;
+ transition: 0.15s color ease;
+}
+ a:hover {
+ color: #f76f76;
+ }
+
+h1, h2 {
+ font-size: 24px;
+}
+
+p {
+ margin: 10px 0 10px 0;
+ font-size: 15px;
+}
+
+small {
+ display: block;
+ margin: 10px 0 20px 0;
+ color: #333;
+}
+
+
+/**
+ *
+ */
+
+body {
+ -webkit-transition: -webkit-perspective .4s ease;
+ -moz-transition: -moz-perspective .4s ease;
+ -ms-transition: -ms-perspective .4s ease;
+ -o-transition: -o-perspective .4s ease;
+ transition: perspective .4s ease;
+
+ -webkit-perspective: 800px;
+ -moz-perspective: 800px;
+ -ms-perspective: 800px;
+ -o-perspective: 800px;
+ perspective: 800px;
+
+ -webkit-perspective-origin: 0% 50%;
+ -moz-perspective-origin: 0% 50%;
+ -ms-perspective-origin: 0% 50%;
+ -o-perspective-origin: 0% 50%;
+ perspective-origin: 0% 50%;
+}
+
+.meny {
+ position: fixed;
+ height: 100%;
+ width: 300px;
+ z-index: 1;
+ background: #333;
+
+ margin: 0px;
+ padding: 20px;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ -webkit-transition: -webkit-transform .4s ease;
+ -moz-transition: -moz-transform .4s ease;
+ -ms-transition: -ms-transform .4s ease;
+ -o-transition: -o-transform .4s ease;
+ transition: transform .4s ease;
+
+ -webkit-transform-origin: 0% 50%;
+ -moz-transform-origin: 0% 50%;
+ -ms-transform-origin: 0% 50%;
+ -o-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+
+ -webkit-transform: rotateY( -30deg ) translateX( -100% );
+ -moz-transform: rotateY( -30deg ) translateX( -100% );
+ -ms-transform: rotateY( -30deg ) translateX( -100% );
+ -o-transform: rotateY( -30deg ) translateX( -100% );
+ transform: rotateY( -30deg ) translateX( -100% );
+}
+
+.meny-contents {
+ background: #eee;
+ padding: 20px;
+ width: 100%;
+ height: 100%;
+
+ box-shadow: 5px 0px 40px rgba( 0, 0, 0, 0.5 );
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ -webkit-transition: -webkit-transform .4s ease;
+ -moz-transition: -moz-transform .4s ease;
+ -ms-transition: -ms-transform .4s ease;
+ -o-transition: -o-transform .4s ease;
+ transition: transform .4s ease;
+
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ -o-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+
+ -webkit-transform-origin: 0% 50%;
+ -moz-transform-origin: 0% 50%;
+ -ms-transform-origin: 0% 50%;
+ -o-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
+}
+
+.meny-active .meny {
+ -webkit-transform: rotateY(0deg);
+ -moz-transform: rotateY(0deg);
+ -ms-transform: rotateY(0deg);
+ -o-transform: rotateY(0deg);
+ transform: rotateY(0deg);
+}
+
+.meny-active .meny-contents {
+ -webkit-transform: translateX( 300px ) rotateY( 15deg );
+ -moz-transform: translateX( 300px ) rotateY( 15deg );
+ -ms-transform: translateX( 300px ) rotateY( 15deg );
+ -o-transform: translateX( 300px ) rotateY( 15deg );
+ transform: translateX( 300px ) rotateY( 15deg );
+}
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+
+ <title>Meny</title>
+
+ <meta name="description" content="A playful JavaScript+CSS ribbon">
+ <meta name="author" content="Hakim El Hattab">
+
+ <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+
+ <link rel="stylesheet" href="css/demo.css">
+ <link rel="stylesheet" href="css/meny.css">
+ </head>
+
+ <body>
+
+ <div class="meny">
+ <h2>A hidden menu</h2>
+ </div>
+
+ <div class="meny-arrow"></div>
+
+ <div class="meny-contents">
+ <h1>Meny</h1>
+ <p>
+
+ </p>
+ <small>
+ Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
+ </small>
+ </div class="meny-contents">
+
+ <script src="js/meny.js"></script>
+
+
+ <!-- Third party stuffs -->
+
+ <div class="sharing">
+ <a href="http://twitter.com/share" class="twitter-share-button" data-text="forkit.js - an animated ribbon UI concept @hakimel" data-url="http://lab.hakim.se/forkit-js" data-count="small" data-related="hakimel"></a>
+
+ <iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Fforkit-js%2F&layout=button_count&show_faces=false&width=93&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe>
+ </div>
+
+ <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
+ (function(d, t) {
+ var g = d.createElement(t),
+ s = d.getElementsByTagName(t)[0];
+ g.async = true;
+ g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ })(document, 'script');
+ </script>
+
+ </body>
+</html>
@@ -0,0 +1,39 @@
+/*!
+ * meny.css 0.2
+ * http://lab.hakim.se/meny
+ * MIT licensed
+ *
+ * Created by Hakim El Hattab, http://hakim.se
+ */
+(function(){
+
+ var activateX = 40;
+ var deactivateX = 300;
+ var isActive = false;
+
+ window.addEventListener( 'mousemove', onMouseMove, false );
+
+ function onMouseMove( event ) {
+ var x = event.clientX,
+ y = event.clientY;
+
+ if( isActive && x > deactivateX ) {
+ deactivate();
+ }
+ else if( !isActive && x < activateX ) {
+ activate();
+ }
+ }
+
+ function activate() {
+ isActive = true;
+ document.documentElement.classList.add( 'meny-active' );
+ }
+
+ function deactivate() {
+ isActive = false;
+ document.documentElement.classList.remove( 'meny-active' );
+ }
+
+})();
+

0 comments on commit 7b8485d

Please sign in to comment.