html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效
一款非常不错的引导页，文字效果渐变，鼠标跟随出绚丽的条纹。html5炫酷网站引导页，鼠标跟随出特效。
体验效果：http://hovertree.com/texiao/html5/
另外推荐一款类似特效：
http://www.cnblogs.com/roucheng/p/layermenu.html
效果图：
以下是源代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5跟随鼠标炫酷网站引导页动画 - 何问起</title>
<link href="http://hovertree.com/texiao/html5/index/hovertreewelcome.css" type="text/css" rel="stylesheet" />
</head>
<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false"> <div id="hovertreecontainer"> <div>
<h1 id="h1">何问起 </h1>
<h2 id="h2"> 想问候，不知从何问起，就直接说喜欢你！</h2>
<h3 id="h2">hovertree.com为您提供前端特效,ASP.NET等设计开发资料。<a href="http://hovertree.com/hvtart/bjae/onxw4ahp.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a></h3>
<p> </p>
<p><strong><a href="http://hovertree.com/">进入主站</a></strong></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div> </div> <canvas id="canvas"></canvas>
<audio autoplay="autoplay">
<source src="http://hovertree.com" type="audio/ogg">
<source src="http://cms.hovertree.com/hovertreesound/hovertreexihuanni.mp3" type="audio/mpeg">
您的浏览器不支持播放音乐。请用支持html5的浏览器打开,例如chrome或火狐或者新版IE等。
<br />何问起 hovertree.com
</audio><script type="text/javascript" src="http://hovertree.com/texiao/html5/index/hovertreewelcome.js">
</script>
<script type="text/javascript"> ; (function (window) { var ctx,
hue,
logo,
form,
buffer,
target = {},
tendrils = [],
settings = {}; settings.debug = true;
settings.friction = 0.5;
settings.trails = 20;
settings.size = 50;
settings.dampening = 0.25;
settings.tension = 0.98; Math.TWO_PI = Math.PI * 2; // ========================================================================================
// Oscillator 何问起
// ---------------------------------------------------------------------------------------- function Oscillator(options) {
this.init(options || {});
} Oscillator.prototype = (function () { var value = 0; return { init: function (options) {
this.phase = options.phase || 0;
this.offset = options.offset || 0;
this.frequency = options.frequency || 0.001;
this.amplitude = options.amplitude || 1;
}, update: function () {
this.phase += this.frequency;
value = this.offset + Math.sin(this.phase) * this.amplitude;
return value;
}, value: function () {
return value;
}
}; })(); // ========================================================================================
// Tendril hovertree.com
// ---------------------------------------------------------------------------------------- function Tendril(options) {
this.init(options || {});
} Tendril.prototype = (function () { function Node() {
this.x = 0;
this.y = 0;
this.vy = 0;
this.vx = 0;
} return { init: function (options) { this.spring = options.spring + (Math.random() * 0.1) - 0.05;
this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
this.nodes = []; for (var i = 0, node; i < settings.size; i++) { node = new Node();
node.x = target.x;
node.y = target.y; this.nodes.push(node);
}
}, update: function () { var spring = this.spring,
node = this.nodes[0]; node.vx += (target.x - node.x) * spring;
node.vy += (target.y - node.y) * spring; for (var prev, i = 0, n = this.nodes.length; i < n; i++) { node = this.nodes[i]; if (i > 0) { prev = this.nodes[i - 1]; node.vx += (prev.x - node.x) * spring;
node.vy += (prev.y - node.y) * spring;
node.vx += prev.vx * settings.dampening;
node.vy += prev.vy * settings.dampening;
} node.vx *= this.friction;
node.vy *= this.friction;
node.x += node.vx;
node.y += node.vy; spring *= settings.tension;
}
}, draw: function () { var x = this.nodes[0].x,
y = this.nodes[0].y,
a, b; ctx.beginPath();
ctx.moveTo(x, y); for (var i = 1, n = this.nodes.length - 2; i < n; i++) { a = this.nodes[i];
b = this.nodes[i + 1];
x = (a.x + b.x) * 0.5;
y = (a.y + b.y) * 0.5; ctx.quadraticCurveTo(a.x, a.y, x, y);
} a = this.nodes[i];
b = this.nodes[i + 1]; ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
ctx.stroke();
ctx.closePath();
}
}; })(); // ---------------------------------------------------------------------------------------- function init(event) { document.removeEventListener('mousemove', init);
document.removeEventListener('touchstart', init); document.addEventListener('mousemove', mousemove);
document.addEventListener('touchmove', mousemove);
document.addEventListener('touchstart', touchstart); mousemove(event);
reset();
loop();
} function reset() { tendrils = []; for (var i = 0; i < settings.trails; i++) { tendrils.push(new Tendril({
spring: 0.45 + 0.025 * (i / settings.trails)
}));
}
} function loop() { if (!ctx.running) return; ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(8,5,16,0.4)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.globalCompositeOperation = 'lighter';
ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';
ctx.lineWidth = 1; if (ctx.frame % 60 == 0) {
console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
} for (var i = 0, tendril; i < settings.trails; i++) {
tendril = tendrils[i];
tendril.update();
tendril.draw();
} ctx.frame++;
ctx.stats.update();
requestAnimFrame(loop);
} function resize() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
} function start() {
if (!ctx.running) {
ctx.running = true;
loop();
}
} function stop() {
ctx.running = false;
} function mousemove(event) {
if (event.touches) {
target.x = event.touches[0].pageX;
target.y = event.touches[0].pageY;
} else {
target.x = event.clientX
target.y = event.clientY;
}
event.preventDefault();
} function touchstart(event) {
if (event.touches.length == 1) {
target.x = event.touches[0].pageX;
target.y = event.touches[0].pageY;
}
} function keyup(event) { switch (event.keyCode) {
case 32:
save();
break;
default:
// console.log(event.keyCode); hovertree.com
}
} function letters(id) { var el = document.getElementById(id),
letters = el.innerHTML.replace('&', '&').split(''),
heading = ''; for (var i = 0, n = letters.length, letter; i < n; i++) {
letter = letters[i].replace('&', '&');
heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : ' ';
} el.innerHTML = heading;
setTimeout(function () {
el.className = 'transition-in';
}, (Math.random() * 500) + 500);
} function save() { if (!buffer) { buffer = document.createElement('canvas');
buffer.width = screen.availWidth;
buffer.height = screen.availHeight;
buffer.ctx = buffer.getContext('2d'); form = document.createElement('form');
form.method = 'post';
form.input = document.createElement('input');
form.input.type = 'hidden';
form.input.name = 'data';
form.appendChild(form.input); document.body.appendChild(form);
} buffer.ctx.fillStyle = 'rgba(8,5,16)';
buffer.ctx.fillRect(0, 0, buffer.width, buffer.height); buffer.ctx.drawImage(canvas,
Math.round(buffer.width / 2 - canvas.width / 2),
Math.round(buffer.height / 2 - canvas.height / 2)
); buffer.ctx.drawImage(logo,
Math.round(buffer.width / 2 - logo.width / 4),
Math.round(buffer.height / 2 - logo.height / 4),
logo.width / 2,
logo.height / 2
); window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height); // form.input.value = buffer.toDataURL().substr(22);
// form.submit(); hovertree.com
} window.requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) { window.setTimeout(fn, 1000 / 60) };
})(); window.onload = function () { ctx = document.getElementById('canvas').getContext('2d');
ctx.stats = new Stats();
ctx.running = true;
ctx.frame = 1; logo = new Image();
logo.src = 'ht' + 'tp://ho' + 'vertree.c' + 'om/themes/hvtimages/hvtlogo.p' + 'ng'; hue = new Oscillator({
phase: Math.random() * Math.TWO_PI,
amplitude: 85,
frequency: 0.0015,
offset: 285
}); letters('h1');
letters('h2'); document.addEventListener('mousemove', init);
document.addEventListener('touchstart', init);
document.body.addEventListener('orientationchange', resize);
window.addEventListener('resize', resize);
window.addEventListener('keyup', keyup);
window.addEventListener('focus', start);
window.addEventListener('blur', stop); resize(); if (window.DEBUG) { var gui = new dat.GUI(); // gui.add(settings, 'debug');
settings.gui.add(settings, 'trails', 1, 30).onChange(reset);
settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset);
settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset);
settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset);
settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset); document.body.appendChild(ctx.stats.domElement);
}
}; })(window); </script>
</body>
</html>
今天大雪，你那里下雪了吗？http://hovertree.com/texiao/js/snow.htm
博客园 roucheng js,jquery,css,html5特效 http://www.cnblogs.com/roucheng/p/texiao.html
html5跟随鼠标炫酷网站引导页动画特效的更多相关文章
- 基于css3炫酷页面加载动画特效代码
基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- jquery 实现智能炫酷的翻页相册效果
jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离1. [代码]jquery ...
- Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画 ...
- IOS炫酷的引导界面
代码地址如下:http://www.demodashi.com/demo/11246.html 一.准备工作 1.先用时ps工具制作好图片 2.然后计算好每张图片通过滑动视图的偏移量来改变图片的位置 ...
- 10个非常炫酷的jQuery相册动画赏析
我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...
- 8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- 超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效
这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...
- 开源分享三（炫酷的Android Loading动画）
开源分享三(炫酷的Android Loading动画) 分享GitHub上的一些Loading,为了提升产品用户体验,一个好的Loading必然是不可缺少的,对于一些耗时需要用户等待的页面来说会转移用 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
随机推荐
- 一步一步学ROP之linux_x64篇
一步一步学ROP之linux_x64篇 一.序 **ROP的全称为Return-oriented programming(返回导向编程),这是一种高级的内存攻击技术可以用来绕过现代操作系统的各种通用防 ...
- HTML5- Canvas入门（六）
已经第六章了,也差不多接近尾声,如果你从第一章耐心follow到本章结束,那你便能掌握canvas的大部分知识点(当然如果要精通,还是得多靠练习,做一些小案例). 今天我们要学习的是canvas的变形 ...
- 《CLR.via.C#第三版》第二部分第10，11章节读书笔记(五)
第10章是对 属性 做阐述 属性本质上是方法 匿名类型的使用: }; Console.WriteLine("Name={0},Year={1}",o1.Name,o1.Year); ...
- static与并发
在java中static用来修饰Class类中属性和方法. 被static修饰的成员属性和成员方法独立于该类的任何对象,它们在内存空间上会被放在描述Class的位置中,也就是说它们为此类(Class) ...
- android内部培训视频_第一节
声明:本视频为公司内部做android培训时录制的,无任何商业目的.同时鉴于水平有限,可能不符合您的需求,放在这里的目的是提供给公司同事下载,作为培训的一个记录,也作为一个系列教程的自我督促完成的理由 ...
- CSharpGL(2)设计和使用场景元素及常用接口
CSharpGL(2)设计和使用场景元素及常用接口 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合入 ...
- Java Thread 的使用
Java Thread 的使用 Java Thread 的 run() 与 start() 的区别 Java Thread 的 sleep() 和 wait() 的区别 一.线程的状态 在正式学习 ...
- python的shutil模块
shutil模块提供了大量的文件的高级操作.特别针对文件拷贝和删除,主要功能为目录和文件操作以及压缩操作 1.复制文件 def copy(src, dst): """Co ...
- 人之初，性本动 - G2 2.1 发布
前言 随着可视化进入深水区,G2面临了越来越多交互上的需求.动画是提升交互必不可少的一部分,也是之前G2的薄弱环节.这个版本里我们开发并替换了动画底层,统一了时间轴,使G2的动画性能大大提升,并提供了 ...
- jsp中头的导入两种方式区别
1.<jsp:include page="top.jsp">先将top.jsp中的java脚本和jsp指令执行完毕以后再讲top.jsp页面加入面中 2.<%@ ...