A quick prototype of the open/close menu transition with guillotine effect, seen first on this article.
Test with your mobile device by clicking here
Last active
February 8, 2016 15:22
-
-
Save abusedmedia/a64def2998c8eef1ef54 to your computer and use it in GitHub Desktop.
Guillotine menu transition
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" type="text/css" href="lib.css" /> | |
| <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script> | |
| <meta name="viewport" content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <meta name="mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-title" content="prototypon"> | |
| <meta name="application-name" content="prototypon"> | |
| </head> | |
| <body class="mobileready"> | |
| <script> | |
| // specify here your svg filename | |
| var svg_path = "ui.svg" | |
| function init() { | |
| var isOpen = false; | |
| d3.select('#menu') | |
| .attr('transform', 'translate(0,62), rotate(-90)') | |
| d3.select('#menu').on('click', function () { | |
| var angle = (isOpen) ? -90 : 0; | |
| var shift = (isOpen) ? 62 : 0; | |
| var ease = (isOpen) ? 'cubic-out' : 'bounce'; | |
| var time = (isOpen) ? 400 : 700; | |
| d3.select('#menu') | |
| .transition() | |
| .ease(ease) | |
| .duration(time) | |
| .attr('transform', 'translate(0,' + shift + '), rotate(' + angle + ')') | |
| var op = (isOpen) ? 1 : 0; | |
| d3.select('#header') | |
| .transition() | |
| .style('opacity', op) | |
| isOpen = !isOpen; | |
| }) | |
| } | |
| </script> | |
| <script src="lib.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| * { | |
| box-sizing:border-box; | |
| } | |
| html{ | |
| width:100%; | |
| height:100%; | |
| } | |
| body{ | |
| width:100%; | |
| padding:0; | |
| margin:0; | |
| overflow: hidden; | |
| } | |
| body.mobileready{ | |
| height:100%; | |
| } | |
| svg{ | |
| width:100%; | |
| overflow: inherit; | |
| } | |
| body.mobileready svg{ | |
| height:100%; | |
| } | |
| svg *{ | |
| -webkit-tap-highlight-color: rgba(0,0,0,0); | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| @media(max-device-width: 600px){ | |
| html, body.mobileready{ | |
| height:inherit; | |
| } | |
| body.mobileready svg{ | |
| height:inherit; | |
| } | |
| } |
This file contains hidden or 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
| d3.xml(svg_path, "image/svg+xml", function(xml) { | |
| d3.select('body').node().appendChild(xml.documentElement); | |
| d3.select('svg') | |
| .attr('width', null) | |
| .attr('height', null) | |
| FastClick.attach(document.body); | |
| init() | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment