html5 svg弹性动画制作网页弹性菜单动画特效



108 428 143



特效描述:弹性动画制作 网页弹性菜单 动画特效,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/sidebar.css" />

2. 引入JS

<script type="text/javascript" src="js/snap.svg-min.js"></script>
<script type="text/javascript" src="js/html5.js"></script>
<script src="js/classie.js"></script>

3. HTML代码

<div class="container">
	<nav id="menu" class="menu">
		<button class="menu__handle"><span>Menu</span></button>
		<div class="menu__inner">
			<ul>
				<li><a href="#"><i class="fa fa-fw fa-home"></i><span>Home<span></a></li>
				<li><a href="#"><i class="fa fa-fw fa-heart"></i><span>Favs<span></a></li>
				<li><a href="#"><i class="fa fa-fw fa-folder"></i><span>Files<span></a></li>
				<li><a href="#"><i class="fa fa-fw fa-tachometer"></i><span>Stats<span></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="100%" 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>
	<div class="main">
		<header class="codrops-header">
			<h1>弹性SVG元素 <span>添加弹性与SVG形状动画</span></h1>
			<nav class="codrops-demos">
				<a class="current-demo" href="index.html">Sidebar Menu</a>
				<a href="pullupmenu.html">Pull-Up Menu</a>
				<a href="dropdown.html">Drop-down Menu</a>
				<a href="drag.html">Drag &amp; Drop</a>
				<a href="collapseexpand.html">Collapse &amp; Expand</a>
				<a href="hamburger.html">Menu Icon</a>
				<a href="circlemenu.html">Circular Menu</a>
				<a href="inputs.html">Inputs</a>
				<a href="button.html">Buttons</a>
			</nav>
		</header>
	</div><!-- /main -->
</div><!-- /container -->
<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 浮动提示框 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 浮动菜单 浮动导航 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到