html5 svg彈性動畫制作網頁彈性菜單動畫特效



112 447 150



特效描述:彈性動畫制作 網頁彈性菜單 動畫特效,

代碼結構

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

加群請備注:從官網了解到

老夫子电子