Difference between revisions of "Team:XMU-China/Experiments"

Line 7: Line 7:
 
<meta name="apple-mobile-web-app-capable content="yes">
 
<meta name="apple-mobile-web-app-capable content="yes">
 
<meta name="apple-mobile-web-app-status-bar-style content="black">
 
<meta name="apple-mobile-web-app-status-bar-style content="black">
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<meta name="description" content="Adding elasticity with SVG shape animations" />
 +
<meta name="keywords" content="svg, morph, snap.svg, effect, animation, css, shape" />
 +
<meta name="author" content="Codrops" />
  
 
<title>2017.igem.org/Team:XMU-China/Experiments</title>
 
<title>2017.igem.org/Team:XMU-China/Experiments</title>
Line 13: Line 18:
 
<link href="https://2017.igem.org/Team:XMU-China/css/ExperimentsCss?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
<link href="https://2017.igem.org/Team:XMU-China/css/ExperimentsCss?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
<link href="https://2017.igem.org/Team:XMU-China/css/timelineCss?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
<link href="https://2017.igem.org/Team:XMU-China/css/timelineCss?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 +
<link href="https://2017.igem.org/Team:XMU-China/css/sidebar.Css" rel="stylesheet" type="text/css">
 +
<script href="https://2017.igem.org/Team:XMU-China/js/sidebar.Js" type="text/javascript"></script>
 +
 +
<link rel="stylesheet" type="text/css" href="css/demo.css" />
 +
<script src="js/snap.svg-min.js"></script>
 +
<!--[if IE]>
 +
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 +
<![endif]-->
 
</head>
 
</head>
  
Line 95: Line 108:
 
</div>
 
</div>
 
<!--end guide-->
 
<!--end guide-->
 +
 +
 +
<nav id="menu" class="menu">
 +
<button class="menu__handle"><span>Menu</span></button>
 +
<div class="menu__inner">
 +
<ul>
 +
<li><a href="#"><span ><p align=center ><font size='5'>男人<span></font></p></a></li>
 +
<li><a href="#"><span ><p align=center ><font size='5'>女人<span></font></p></a></li>
 +
<li><a href="#"><span ><p align=center ><font size='5'>数码<span></font></p></a></li>
 +
<li><a href="#"><span ><p align=center ><font size='5'>家居<span></font></p></a></li>
 +
<li><a href="#"><span ><p align=center ><font size='5'>母婴<span></font></p></a></li>
 +
<li><a href="#"><span ><p align=center ><font size='5'>美食<span></font></p></a></li>
 +
<li><a href="#"><span ><p align=center ><font size='5'>美妆<span></font></p></a></li>
 +
<li><a href="#"><span ><p align=center ><font size='5'>箱包<span></font></p></a></li>
 +
<li><a href="#"><span ><p align=center ><font size='5'>运动<span></font></p></a></li>
 +
<li><a href="#"><span ><p align=center ><font size='5'>书籍<span></font></p></a></li>
 +
</ul>
 +
</div>
 +
 +
<div class="morph-shape" data-morph-open="M300-10c0,0,295,164,295,410c0,232-295,410-295,410" data-morph-close="M300-10C300-10,5,154,5,400c0,232,295,410,295,410">
 +
<svg width="80%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">
 +
<path fill="none" d="M300-10c0,0,0,164,0,410c0,232,0,410,0,410"/>
 +
</svg>
 +
</div>
 +
</nav>
 +
<script src="js/classie.js"></script>
 +
<script>
 +
(function() {
 +
 +
function SVGMenu( el, options ) {
 +
this.el = el;
 +
this.init();
 +
}
 +
 +
SVGMenu.prototype.init = function() {
 +
this.trigger = this.el.querySelector( 'button.menu__handle' );
 +
this.shapeEl = this.el.querySelector( 'div.morph-shape' );
 +
 +
var s = Snap( this.shapeEl.querySelector( 'svg' ) );
 +
this.pathEl = s.select( 'path' );
 +
this.paths = {
 +
reset : this.pathEl.attr( 'd' ),
 +
open : this.shapeEl.getAttribute( 'data-morph-open' ),
 +
close : this.shapeEl.getAttribute( 'data-morph-close' )
 +
};
 +
 +
this.isOpen = false;
 +
 +
this.initEvents();
 +
};
 +
 +
SVGMenu.prototype.initEvents = function() {
 +
this.trigger.addEventListener( 'click', this.toggle.bind(this) );
 +
};
 +
 +
SVGMenu.prototype.toggle = function() {
 +
var self = this;
 +
 +
if( this.isOpen ) {
 +
classie.remove( self.el, 'menu--anim' );
 +
setTimeout( function() { classie.remove( self.el, 'menu--open' ); }, 250 );
 +
}
 +
else {
 +
classie.add( self.el, 'menu--anim' );
 +
setTimeout( function() { classie.add( self.el, 'menu--open' ); }, 250 );
 +
}
 +
this.pathEl.stop().animate( { 'path' : this.isOpen ? this.paths.close : this.paths.open }, 350, mina.easeout, function() {
 +
self.pathEl.stop().animate( { 'path' : self.paths.reset }, 800, mina.elastic );
 +
} );
 +
 +
this.isOpen = !this.isOpen;
 +
};
 +
 +
new SVGMenu( document.getElementById( 'menu' ) );
 +
 +
})();
 +
</script>
 +
 +
  
 
<!--title-->
 
<!--title-->

Revision as of 00:39, 19 October 2017

2017.igem.org/Team:XMU-China/Experiments

Experiments