基于HTML5的网页动画背景

网站效果见这里：给力壁纸http://wordsmotivate.me/

 

前一段发现了这个优秀的网站，看到在鼠标点击时网页背景在当前位置会触发一个线条动画效果，而且动画线条的颜色方向都是随机的。

 

今天有空研究了一下，把代码拿下来放这里和大家分享一下。

 

HTML中的秘密：

<div style="z-index:0; position:fixed; top: 0pt; left: 0pt; width:100%; overflow:hidden;"><canvas id="canvas" width="1366" height="384"></canvas></div>

 关键的JS:

<script type="text/javascript">
(function() {
  if(window.IElt9||document.domain.match(/jigsy.com/)) return; 
$j.ajax({
  url: 'http://img.wordsmotivate.me/sitebg/tunneler.js?ver=6',
  dataType: 'script',
  cache: true
});
})();
</script>

 

把这个JS下载下来后把最后两行修改一下，使其不依赖jQuery

 

原：
	$j(document).ready(function(){initTunneler();});
    $j(window).resize(function(){resizeTunneler();});

改：

	window.onload=initTunneler;

	window.onresize=resizeTunneler;

 

自已创建个html页面，放入div和canvas，引入修改后的js，运行就看到效果了！

 

好吧，为懒人准备了一份代码在附件中。