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

体验效果：

效果图：

html5跟随鼠标炫酷网站引导页动画 - 何问起何问起 想问候，不知从何问起，就直接说喜欢你！hovertree.com为您提供前端特效,ASP.NET等设计开发资料。原文特效进入主站您的浏览器不支持播放音乐。请用支持html5的浏览器打开,例如chrome或火狐或者新版IE等。 何问起 hovertree.com (window) { ctx, 40 hue, 41 logo, 42 form, 43 buffer, {}, [], {}; ; ; ; ; ; ; ; Oscillator(options) { {}); 63 } () { ; { (options) { ; ; ; ; 76 }, () { .frequency; .amplitude; 81 return value; 82 }, () { 85 return value; 86 } 87 }; 88 89 })(); Tendril(options) { {}); 97 } () { Node() { ; ; ; ; 106 } { (options) { ; ; []; ) { Node(); target.x; target.y; .nodes.push(node); 123 } 124 }, () { .spring, ]; spring; spring; ) { .nodes[i]; ) { ]; spring; spring; settings.dampening; settings.dampening; 146 } .friction; .friction; node.vx; node.vy; settings.tension; 154 } 155 }, () { ].x, ].y, 161 a, b; 162 163 ctx.beginPath(); 164 ctx.moveTo(x, y); ) { .nodes[i]; ]; ; ; 172 173 ctx.quadraticCurveTo(a.x, a.y, x, y); 174 } .nodes[i]; ]; 178 179 ctx.quadraticCurveTo(a.x, a.y, b.x, b.y); 180 ctx.stroke(); 181 ctx.closePath(); 182 } 183 }; 184 185 })(); init(event) { , init); , init); , mousemove); , mousemove); , touchstart); 197 198 mousemove(event); 199 reset(); 200 loop(); 201 } reset() { []; ) { Tendril({ settings.trails) 211 })); 212 } 213 } loop() { ; ; ; , ctx.canvas.width, ctx.canvas.height); ; ; ; ) { 227 console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude); 228 } ) { tendrils[i]; 232 tendril.update(); 233 tendril.draw(); 234 } ; 237 ctx.stats.update(); 238 requestAnimFrame(loop); 239 } resize() { window.innerWidth; window.innerHeight; 244 } start() { ctx.running) { ; 249 loop(); 250 } 251 } stop() { ; 255 } mousemove(event) { 258 if (event.touches) { ].pageX; ].pageY; { event.clientX event.clientY; 264 } 265 event.preventDefault(); 266 } touchstart(event) { ) { ].pageX; ].pageY; 272 } 273 } keyup(event) { (event.keyCode) { : 279 save(); 280 break; 281 default: } 284 } letters(id) { document.getElementById(id), ), ; ) { ); ; 295 } heading; () { ; ); 301 } save() { buffer) { ); screen.availWidth; screen.availHeight; ); ); ; ); ; ; 317 form.appendChild(form.input); 318 319 document.body.appendChild(form); 320 } ; , buffer.width, buffer.height); 324 325 buffer.ctx.drawImage(canvas, ), ) 328 ); 329 330 buffer.ctx.drawImage(logo, ), ), , ); buffer.height); } () { ) }; 345 })(); () { ); Stats(); ; ; Image(); ; Oscillator({ Math.TWO_PI, , , }); ); ); , init); , init); , resize); , resize); , keyup); , start); , stop); 374 375 resize(); (window.DEBUG) { dat.GUI(); ).onChange(reset); ).onFinishChange(reset); ).onFinishChange(reset); ).onFinishChange(reset); ).onFinishChange(reset); 387 388 document.body.appendChild(ctx.stats.domElement); 389 } 390 }; 391 392 })(window);

今天大雪，你那里下雪了吗？

博客园 roucheng js,jquery,css,html5特效