你的位置:首页 > 网页设计

[网页设计]html5跟随鼠标炫酷网站引导页动画特效


html5跟随鼠标炫酷网站引导页动画特效
一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹。html5炫酷网站引导页,鼠标跟随出特效。

体验效果:http://hovertree.com/texiao/html5/

效果图:



以下是源代码:

 1 <!DOCTYPE html> 2 <html ="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>html5跟随鼠标炫酷网站引导页动画 - 何问起</title> 6 <link href="http://hovertree.com/texiao/html5/index/hovertreewelcome.css" type="text/css" rel="stylesheet" /> 7 </head> 8 <body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false"> 9  10 <div id="hovertreecontainer"> 11  12 <div> 13 <h1 id="h1">何问起 </h1> 14 <h2 id="h2"> 想问候,不知从何问起,就直接说喜欢你!</h2> 15 <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> 16 <p>&nbsp;</p> 17 <p><strong><a href="http://hovertree.com/">进入主站</a></strong></p> 18 <p>&nbsp;</p> 19 <p>&nbsp;</p> 20 <p>&nbsp;</p> 21 <p>&nbsp;</p> 22 <p>&nbsp;</p> 23 </div> 24  25 </div> 26  27 <canvas id="canvas"></canvas> 28 <audio autoplay="autoplay"> 29 <source src="http://hovertree.com" type="audio/ogg"> 30 <source src="http://cms.hovertree.com/hovertreesound/hovertreexihuanni.mp3" type="audio/mpeg"> 31 您的浏览器不支持播放音乐。请用支持html5的浏览器打开,例如chrome或火狐或者新版IE等。 32 <br />何问起 hovertree.com 33 </audio><script type="text/javascript" src="http://hovertree.com/texiao/html5/index/hovertreewelcome.js"> 34 </script> 35 <script type="text/javascript"> 36  37 ; (function (window) { 38  39 var ctx, 40 hue, 41 logo, 42 form, 43 buffer, 44 target = {}, 45 tendrils = [], 46 settings = {}; 47  48 settings.debug = true; 49 settings.friction = 0.5; 50 settings.trails = 20; 51 settings.size = 50; 52 settings.dampening = 0.25; 53 settings.tension = 0.98; 54  55 Math.TWO_PI = Math.PI * 2; 56  57 // ======================================================================================== 58 // Oscillator 何问起 59 // ---------------------------------------------------------------------------------------- 60  61 function Oscillator(options) { 62 this.init(options || {}); 63 } 64  65 Oscillator.prototype = (function () { 66  67 var value = 0; 68  69 return { 70  71 init: function (options) { 72 this.phase = options.phase || 0; 73 this.offset = options.offset || 0; 74 this.frequency = options.frequency || 0.001; 75 this.amplitude = options.amplitude || 1; 76 }, 77  78 update: function () { 79 this.phase += this.frequency; 80 value = this.offset + Math.sin(this.phase) * this.amplitude; 81 return value; 82 }, 83  84 value: function () { 85 return value; 86 } 87 }; 88  89 })(); 90  91 // ======================================================================================== 92 // Tendril hovertree.com 93 // ---------------------------------------------------------------------------------------- 94  95 function Tendril(options) { 96 this.init(options || {}); 97 } 98  99 Tendril.prototype = (function () {100 101 function Node() {102 this.x = 0;103 this.y = 0;104 this.vy = 0;105 this.vx = 0;106 }107 108 return {109 110 init: function (options) {111 112 this.spring = options.spring + (Math.random() * 0.1) - 0.05;113 this.friction = settings.friction + (Math.random() * 0.01) - 0.005;114 this.nodes = [];115 116 for (var i = 0, node; i < settings.size; i++) {117 118 node = new Node();119 node.x = target.x;120 node.y = target.y;121 122 this.nodes.push(node);123 }124 },125 126 update: function () {127 128 var spring = this.spring,129 node = this.nodes[0];130 131 node.vx += (target.x - node.x) * spring;132 node.vy += (target.y - node.y) * spring;133 134 for (var prev, i = 0, n = this.nodes.length; i < n; i++) {135 136 node = this.nodes[i];137 138 if (i > 0) {139 140 prev = this.nodes[i - 1];141 142 node.vx += (prev.x - node.x) * spring;143 node.vy += (prev.y - node.y) * spring;144 node.vx += prev.vx * settings.dampening;145 node.vy += prev.vy * settings.dampening;146 }147 148 node.vx *= this.friction;149 node.vy *= this.friction;150 node.x += node.vx;151 node.y += node.vy;152 153 spring *= settings.tension;154 }155 },156 157 draw: function () {158 159 var x = this.nodes[0].x,160 y = this.nodes[0].y,161 a, b;162 163 ctx.beginPath();164 ctx.moveTo(x, y);165 166 for (var i = 1, n = this.nodes.length - 2; i < n; i++) {167 168 a = this.nodes[i];169 b = this.nodes[i + 1];170 x = (a.x + b.x) * 0.5;171 y = (a.y + b.y) * 0.5;172 173 ctx.quadraticCurveTo(a.x, a.y, x, y);174 }175 176 a = this.nodes[i];177 b = this.nodes[i + 1];178 179 ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);180 ctx.stroke();181 ctx.closePath();182 }183 };184 185 })();186 187 // ----------------------------------------------------------------------------------------188 189 function init(event) {190 191 document.removeEventListener('mousemove', init);192 document.removeEventListener('touchstart', init);193 194 document.addEventListener('mousemove', mousemove);195 document.addEventListener('touchmove', mousemove);196 document.addEventListener('touchstart', touchstart);197 198 mousemove(event);199 reset();200 loop();201 }202 203 function reset() {204 205 tendrils = [];206 207 for (var i = 0; i < settings.trails; i++) {208 209 tendrils.push(new Tendril({210 spring: 0.45 + 0.025 * (i / settings.trails)211 }));212 }213 }214 215 function loop() {216 217 if (!ctx.running) return;218 219 ctx.globalCompositeOperation = 'source-over';220 ctx.fillStyle = 'rgba(8,5,16,0.4)';221 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);222 ctx.globalCompositeOperation = 'lighter';223 ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';224 ctx.lineWidth = 1;225 226 if (ctx.frame % 60 == 0) {227 console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);228 }229 230 for (var i = 0, tendril; i < settings.trails; i++) {231 tendril = tendrils[i];232 tendril.update();233 tendril.draw();234 }235 236 ctx.frame++;237 ctx.stats.update();238 requestAnimFrame(loop);239 }240 241 function resize() {242 ctx.canvas.width = window.innerWidth;243 ctx.canvas.height = window.innerHeight;244 }245 246 function start() {247 if (!ctx.running) {248 ctx.running = true;249 loop();250 }251 }252 253 function stop() {254 ctx.running = false;255 }256 257 function mousemove(event) {258 if (event.touches) {259 target.x = event.touches[0].pageX;260 target.y = event.touches[0].pageY;261 } else {262 target.x = event.clientX263 target.y = event.clientY;264 }265 event.preventDefault();266 }267 268 function touchstart(event) {269 if (event.touches.length == 1) {270 target.x = event.touches[0].pageX;271 target.y = event.touches[0].pageY;272 }273 }274 275 function keyup(event) {276 277 switch (event.keyCode) {278 case 32:279 save();280 break;281 default:282 // console.log(event.keyCode); hovertree.com283 }284 }285 286 function letters(id) {287 288 var el = document.getElementById(id),289 letters = el.innerHTML.replace('&amp;', '&').split(''),290 heading = '';291 292 for (var i = 0, n = letters.length, letter; i < n; i++) {293 letter = letters[i].replace('&', '&amp');294 heading += letter.trim() ? '<span background-color: #f5f5f5; color: #000000;">' + i + '">' + letter + '</span>' : '&nbsp;';295 }296 297 el.innerHTML = heading;298 setTimeout(function () {299 el.className = 'transition-in';300 }, (Math.random() * 500) + 500);301 }302 303 function save() {304 305 if (!buffer) {306 307 buffer = document.createElement('canvas');308 buffer.width = screen.availWidth;309 buffer.height = screen.availHeight;310 buffer.ctx = buffer.getContext('2d');311 312 form = document.createElement('form');313 form.method = 'post';314 form.input = document.createElement('input');315 form.input.type = 'hidden';316 form.input.name = 'data';317 form.appendChild(form.input);318 319 document.body.appendChild(form);320 }321 322 buffer.ctx.fillStyle = 'rgba(8,5,16)';323 buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);324 325 buffer.ctx.drawImage(canvas,326 Math.round(buffer.width / 2 - canvas.width / 2),327 Math.round(buffer.height / 2 - canvas.height / 2)328 );329 330 buffer.ctx.drawImage(logo,331 Math.round(buffer.width / 2 - logo.width / 4),332 Math.round(buffer.height / 2 - logo.height / 4),333 logo.width / 2,334 logo.height / 2335 );336 337 window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height);338 339 // form.input.value = buffer.toDataURL().substr(22);340 // form.submit(); hovertree.com341 }342 343 window.requestAnimFrame = (function () {344 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) { window.setTimeout(fn, 1000 / 60) };345 })();346 347 window.onload = function () {348 349 ctx = document.getElementById('canvas').getContext('2d');350 ctx.stats = new Stats();351 ctx.running = true;352 ctx.frame = 1;353 354 logo = new Image();355 logo.src = 'ht' + 'tp://ho' + 'vertree.c' + 'om/themes/hvtimages/hvtlogo.p' + 'ng';356 357 hue = new Oscillator({358 phase: Math.random() * Math.TWO_PI,359 amplitude: 85,360 frequency: 0.0015,361 offset: 285362 });363 364 letters('h1');365 letters('h2');366 367 document.addEventListener('mousemove', init);368 document.addEventListener('touchstart', init);369 document.body.addEventListener('orientationchange', resize);370 window.addEventListener('resize', resize);371 window.addEventListener('keyup', keyup);372 window.addEventListener('focus', start);373 window.addEventListener('blur', stop);374 375 resize();376 377 if (window.DEBUG) {378 379 var gui = new dat.GUI();380 381 // gui.add(settings, 'debug');382 settings.gui.add(settings, 'trails', 1, 30).onChange(reset);383 settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset);384 settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset);385 settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset);386 settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset);387 388 document.body.appendChild(ctx.stats.domElement);389 }390 };391 392 })(window);393 394 </script>395 </body>396 </html>

今天大雪,你那里下雪了吗?http://hovertree.com/texiao/js/snow.htm

博客园 roucheng js,jquery,css,html5特效 http://www.cnblogs.com/roucheng/p/texiao.html