首页 何问起 前端特效 htbtn-4 闪电 使用方法

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

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

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

 

另外推荐一款类似特效：

http://www.cnblogs.com/roucheng/p/layermenu.html

效果图：



以下是源代码：

  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

posted @ 2015-12-07 22:26  roucheng  阅读(18792)  评论(3)  编辑  收藏  举报