网站效果见这里:给力壁纸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,运行就看到效果了!
好吧,为懒人准备了一份代码在附件中。
分享到:
相关推荐
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
粒子动画背景登录页面
一款基于HTML5 Canvas实现的网页气泡背景动画特效,漂亮的HTML5圆形气泡背景动画代码下载。
HTML5网页背景切换动画代码基于jquery-1.11.0.min.js制作,点击下拉框不同选项网页背景切换不同颜色。
html5漂浮的圆形动画背景特效,打开网页后,网页背景显示随机数量、随机大小的圆形,填充颜色也不相同,这些圆形自由浮动,位置随机,最终形成一种很飘逸的背景动画效果,这些圆圈并非调用的图片,而是基于HTML5 ...
十几套基于canvas实现的网页动画效果(canvas火焰燃烧动画html5代码,canvas五彩斑斓的粒子动画特效,cssdoodlejs粒子动态背景特效,canvas五彩斑斓的粒子动画特效,HTML5Canvas绘制的红色倾斜线条划过动画特效,js...
HTML5网页背景切换动画源码 源码描述: 一、源码特点 1、HTML5网页背景切换动画代码基于jquery-1.11.0.min.js制作,点击下拉框不同选项网页背景切换不同颜色。非常适合新手学习以及二次开发,欢迎大家来下载! 二...
HTML5线条像素背景动画特效是一款基于HTML5 Canvas画布绘制的动态线条像素图背景动画特效。
HTML5炫彩粒子动画背景特效是一款基于HTML5 Canvas绘制的随机流动粒子动画背景特效。
网页模板——基于html5 canvas绘制炫酷爆炸圆点背景动画特效源码
html5基于canvas制作酷炫带背景动画的后台登录页面模板下载。
这是一款three.js基于html5 canvas绘制的液态抽象背景动画特效,艺术抽象网页背景动画效果。
这是一款基于HTML5 SVG制作的彩色爱心圆圈背景动画特效,各种颜色的爱心圆圈慢慢变大,不断循环。
基于html5 svg绘制细胞背景动画特效源码.zip
基于html5 canvas绘制的全屏酷炫星光闪烁3D视差背景动画特效,还有鼠标交互效果哦。
HTML5 CSS3实现炫丽的落叶飘飞的网页背景动画,有一种森林的纵深感,树叶大小不一、远近不同、路径不同,形成一种很自然的落叶飘飞效果。核心基于HTML5中的Canvas技术,在测试时,IE就不用提了,最好是使用Google 的...
HTML5空间粒子背景动画特效是一款html5基于canvas绘制彩色酷炫的空间粒子移动背景动画特效。