canvas鼠标悬停后字母粒子放大效果

html5 canvas鼠标悬停英文字母颗粒状放大查看效果

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

<link rel="stylesheet" type="text/css" href="css/demo.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/banner1.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/.custom.41769.js"></script>

</head>
<body>

< class="more">
	<ul>
		<li class="selected"><a href="index.html">Demo 1</a></li>
		<li><a href="index2.html">Demo 2</a></li>
		<li><a href="index3.html">Demo 3</a></li>
		<li><a href="index4.html">Demo 4</a></li>
	</ul>
</div>

<div id="wrapper" class="wrapper">
	<canvas id="canvas-banner" class="inactive">
		<img src="images/fallback1.png" />
	</canvas>
</div>
		

<script type="text/javascript">
if(Modernizr.canvas) {

	var wrapper = document.getElementById('wrapper'),
			= document.createElement('div');
	
	loading.className = 'loading';
	loading.setAttribute('id','loading');
	loading.innerHTML = 'Loading...';

	wrapper.appendChild(loading);

	google.load('webfont','1');
	google.setOnLoadCallback(function() {
		WebFont.load({
			google: {
				families: ['Jockey One']
			},
			active: function() {
				setTimeout(function() {
					
					loading.style.display = 'none';
					
					var banner = new Banner();
					banner.initialize('canvas-banner');
					
					document.getElementById('font').style.display = 'block';
				
				}, 1000);
			},
			inactive: function() {
				
				// google font not loaded, we will use the default font : Arial (set in baner.js file)
				loading.style.display = 'none';
				
				var banner = new Banner();
				banner.initialize('canvas-banner');
				
			}
		});
	});

}
</script>
</body>
</html>	

JS和CSS文件右侧下载

思源源码基地https://www.rmb4.cn所有源码资源均聚合于互联网各大会员资源站,仅用于您下载学习,如需商用,请您支持正版! 转载请注明出处!
源码基地-站长之家-网站模板-网站源码-源码之家-html模板-网页模板-Wordpress主题-织梦模板 » canvas鼠标悬停后字母粒子放大效果

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

立即赞助 发布资源