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 ...
随机推荐
- [开源]基于WPF实现的Gif图片分割器，提取GIf图片中的每一帧
不知不觉又半个月没有更新博客了,今天终于抽出点时间,来分享一下前段时间的成果. 在网上,我们经常看到各种各样的图片,尤其是GIF图片的动态效果,让整个网站更加富有表现力!有时候,我们看到一些比较好看的 ...
- Android学习——uses-sdk标签详解
1 前言 我们都知道,Android的版本在不断的迭代,并且每个版本都加入了不同的新特性.那么随着Android的用户量越来越多,Android的开发人员就必须熟悉Android各个版本的特性并且确保 ...
- Ubuntu 16 安装JDK1.8
检查是否JDK已被安装: 上图表示没有安装,创建文件夹: 下载JDK: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-dow ...
- C语言 · 查找整数
问题描述 给出一个包含n个整数的数列,问整数a在数列中的第一次出现是第几个. 输入格式 第一行包含一个整数n. 第二行包含n个非负整数,为给定的数列,数列中的每个数都不大于10000. 第三行包含一个 ...
- failed to load the jni shared library jvm
启动eclipse luna时候出现的, 原因在于,eclipse要求jdk是 32位的, 而我本机安装的是 64的!
- Atitit Mysql查询优化器 存取类型 范围存取类型 索引存取类型 AND or的分析
Atitit Mysql查询优化器 存取类型 范围存取类型 索引存取类型 AND or的分析 Atitit Mysql查询优化器 存取类型 范围存取类型 索引存取类型 AND or的分析1 存 ...
- WPF入门教程系列十八——WPF中的数据绑定(四)
六.排序 如果想以特定的方式对数据进行排序,可以绑定到 CollectionViewSource,而不是直接绑定到 ObjectDataProvider.CollectionViewSource 则会 ...
- MySQL_02之增删改查、PHP数据库操作
1.数据操作: ①插入记录: 插入单条记录:INSERT tbl_name(字段名称,--) VALUES(字段值,--); 插入多条记录:INSERT tbl_name(字段名称,--) VAL ...
- CSS移动端多行显示多余省略号
/*css3 多行显示省略号,也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis ...
- struts.xml的编辑
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "- ...