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 ...
随机推荐
- ThoughtWorks代码挑战——FizzBuzzWhizz
很久没发表过文章了,今天看到一篇文章 最难面试的IT公司之ThoughtWorks代码挑战——FizzBuzzWhizz游戏(C#解法) 看到LZ的2B青年代码,实在是惨不忍睹,故写篇文章来探讨下这类 ...
- UI控件（UIPickerView）
@implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _item1 = [[NSArray alloc]i ...
- Windows建立Cucumber和Ruby测试环境
1. 下载安装Ruby1.9.3, 不要用RubyInstall 一键安装,下载zip然后解压到c:\Ruby193 (不要用2.0,用2.0安装不成功,不要怪我) 2. 环境变量配置RUBY_HOM ...
- [史上最全]C#（VB.NET）中位运算符工作过程剖析（译）
原文地址CodeProject 目录 介绍 “二进制-十进制”相互转换 十进制->二进制 二进制->十进制 OR运算符(按位或|) OR运算符工作方式 FlagsAttribute AND ...
- [Voice communications] 音量的控制
改变音频的音量是音频处理中最基础的部分,我们可以利用 GainNode 来构建 Mixers 的结构块.GainNode 的接口是很简单的: interface GainNode : AudioNod ...
- 队列送券的实际应用--ConcurrentLinkedQueue并发队列
1.TicketQueue.java--队列封装类,负责如下职责:a.把活动登记对象放入队列中b.从队列中获取活动登记对象,并派券 package com.datong.pear.ticket; im ...
- ASP.NET Web API自身对CORS的支持：从实例开始
在<通过扩展让ASP.NET Web API支持W3C的CORS规范>中我们通过自定义的HttpMessageHandler为ASP.NET Web API赋予了跨域资源共享的能力,具体来 ...
- [Hadoop大数据]——Hive初识
Hive出现的背景 Hadoop提供了大数据的通用解决方案,比如存储提供了Hdfs,计算提供了MapReduce思想.但是想要写出MapReduce算法还是比较繁琐的,对于开发者来说,需要了解底层的h ...
- 考勤系统代码分析——主页布局easyui框架
考勤系统主页的布局用的是easyui的Layout控件 Layout:布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽其边框改变大小 ...
- Java三大框架 介绍
三大框架:Struts+hibernate+spring Java三大框架主要用来做WEN应用. Struts主要负责表示层的显示 Spring利用它的IOC和AOP来处理控制业务(负责对数据库的操作 ...