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 ...
随机推荐
- Azure SQL Database (21) 将整张表都迁移到Azure Stretch Database里
<Windows Azure Platform 系列文章目录> Azure SQL Database (19) Stretch Database 概览 Azure SQL Da ...
- Node.js返回JSONP
在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<scri ...
- Thread.Sleep引发ThreadAbortException异常
短信平台记录日志模块,是通过异步方式来记录的,即日志工具类里初始化一个Queue对象,公共的写日志方法的处理逻辑是把日志消息放到Queue里.构造器里设定一个死循环,不停的读队,然后把日志消息持久化到 ...
- PHP 基础知识测试题 答案分析
一:选择题(单项选择,每题2分): 1． LAMP具体结构不包含下面哪种(A ) A:Windows系统 如果是这个就是WMP B:Apache服务器 C:MySQ ...
- java反射 之 反射基础
一.反射 反射:JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为 ...
- thinphp框架的项目svn重新检出后的必备配置
刚刚试着去了解thinkphp框架,在这里做一些笔记,后续有新的总结会更新到这里,如有错误与遗漏,望大家指正. 用thinkphp框架的项目,在用svn重新检出之后,需要进行一些基本配置,方可在本地打 ...
- Liferay7 BPM门户开发之38: OSGi模块化Bndtools、Maven、Gradle开发构建入门
前言 OSGi是目前动态模块系统的事实上的工业标准,它适用于任何需要模块化.面向服务.面向组件的应用程序.Eclipse如此庞大和复杂的插件体系,就是基于OSGi.Liferay也是基于OSGi.OS ...
- Android Drawable 那些不为人知的高效用法
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43752383,本文出自:[张鸿洋的博客] 1.概述 Drawable在我们平时的 ...
- 万能Adapter以及ViewHolder性能优化
//CommonAdapter import android.content.Context; import android.widget.BaseAdapter; import java.util. ...
- Android仿qq聊天记录长按删除功能效果
最近项目在做IM即时通讯开发,在删除聊天列表的时候跟删除聊天详细信息的时候,产品经理想要跟ios一样,在当前选中行上方弹出一个删除窗口.于是先从网上找demo,找了一个发现是Dialog做的,我感觉没 ...