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



218 870 291



特效描述:svg html5 页面加载动画 弹出层效果,页面加载动画弹出层效果代码

代码结构

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="css/component.css" />

2. 引入JS

<script src="js/snap.svg-min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/classie.js"></script>
<script src="js/svgLoader.js"></script>

3. HTML代码

<div 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>
	(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>



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


热门标签: 右键菜单 图片延迟加载 图片头像上传 文字提示框 加载动画 文件上传 文字延迟加载 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 延长延迟加载 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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