【html5】多种svg加载页面动画弹出层代码

13种svg html5 loading页面加载动画弹出层效果代码

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Page  Effects | Demo 1</title>

<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="css/component.css" />
<script src="js/snap.svg-min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>
< id="pagewrap" class="pagewrap">

	<div class="container show" id="page-1">

		<section class="columns clearfix">
			<div class="column">
				<nav class="codrops-demos">
					<a class="current-demo" href="index.html">Lazy Stretch</a>
					<a href="index2.html">Circle</a>
					<a href="index3.html">Spill</a>
					<a href="index4.html">Frame it</a>
					<a href="index5.html">Tunnel vision</a>
					<a href="index6.html">Windscreen wiper</a>
					<a href="index7.html">Jammed blind</a>
					<a href="index8.html">Parallelogram</a>
					<a href="index9.html">Tilted</a>
					<a href="index10.html">Lateral Swipe</a>
					<a href="index11.html">Wave</a>
					<a href="index12.html">Origami</a>
					<a href="index13.html">Curtain</a>
				</nav>
			</div>
			<div class="column">
				<p>To start the page loading animation, click the following link:</p>
				<p><a class="pageload-link" href="#page-2">Show Page Loader</a></p>
			</div>
		</section>
		
	</div><!-- /container -->

	<!-- The new page dummy; this would be dynamically loaded content -->
	<div class="container" id="page-2">
		<section>
			<h2>This is an example for a new page.</h2>
			<p><a class="pageload-link" href="#page-1">Go back</a></p>
		</section>
	</div><!-- /container -->

	<div id="loader" class="pageload-overlay" data-opening="M20,15 50,30 50,30 30,30 Z;M0,0 80,0 50,30 20,45 Z;M0,0 80,0 60,45 0,60 Z;M0,0 80,0 80,60 0,60 Z" data-closing="M0,0 80,0 60,45 0,60 Z;M0,0 80,0 50,30 20,45 Z;M20,15 50,30 50,30 30,30 Z;M30,30 50,30 50,30 30,30 Z">
		<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
			<path d="M30,30 50,30 50,30 30,30 Z"/>
		</svg>
	</div><!-- /pageload-overlay -->
	
</div><!-- /pagewrap -->
<script src="js/classie.js"></script>
<script src="js/svgLoader.js"></script>
<script>
	(function() {
		var pageWrap = document.getElementById( 'pagewrap' ),
			pages = [].slice.call( pageWrap.querySelectorAll( 'div.container' ) ),
			currentPage = 0,
			triggerLoading = [].slice.call( pageWrap.querySelectorAll( 'a.pageload-link' ) ),
			loader = new SVGLoader( document.getElementById( 'loader' ), { speedIn : 100 } );

		function init() {
			triggerLoading.forEach( function( trigger ) {
				trigger.addEventListener( 'click', function( ev ) {
					ev.preventDefault();
					loader.show();
					// after some time hide loader
					setTimeout( function() {
						loader.hide();

						classie.removeClass( pages[ currentPage ], 'show' );
						// update..
						currentPage = currentPage ? 0 : 1;
						classie.addClass( pages[ currentPage ], 'show' );

					}, 2000 );
				} );
			} );	
		}

		init();
	})();
</script>
</body>
</html>

CSS和JS文件请右侧下载。

 

 

思源源码基地https://www.rmb4.cn所有源码资源均聚合于互联网各大会员资源站,仅用于您下载学习,如需商用,请您支持正版! 转载请注明出处!
源码基地-站长之家-网站模板-网站源码-源码之家-html模板-网页模板-Wordpress主题-织梦模板 » 【html5】多种svg加载页面动画弹出层代码

源码基地,源码之家,全网网站源码,APP源码,免费下载,采集规则免费教学!

立即赞助 发布资源