html5跟随鼠标炫酷网站引导页动画特效 / 憋错料

html5跟随鼠标炫酷网站引导页动画特效
一款非常不错的引导页，文字效果渐变，鼠标跟随出绚丽的条纹。html5炫酷网站引导页，鼠标跟随出特效。
效果图：
以下是源代码：
  1 <!DOCTYPE html>
  2 <html xmlns="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.clientX
263 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.com
283 }
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 class="letter-‘ + 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 / 2
335 );
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.com
341 }
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: 285
362 });
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
时间： 2025-01-02 17:39:45
html5跟随鼠标炫酷网站引导页动画特效

html5跟随鼠标炫酷网站引导页动画特效的相关文章

纯CSS3炫酷3D折叠面板动画特效

基于css3炫酷页面加载动画特效代码

jquery 实现智能炫酷的翻页相册效果

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

html5 canvas结合js实现的非常酷的ascii animation动画特效

开源分享三（炫酷的Android Loading动画）

墨迹天气引导页动画_Android源码

超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

第七章实现炫酷效果—图像和动画（1）
