html 5 마우스 멋 진 사이트 안내 페이지 애니메이션 효과 따라 가기
또 비슷 한 효 과 를 추천 합 니 다.
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> p>
17 <p><strong><a href="http://hovertree.com/">进入主站a>strong>p>
18 <p> p>
19 <p> p>
20 <p> p>
21 <p> p>
22 <p> 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('&', '&').split(''),
290 heading = '';
291
292 for (var i = 0, n = letters.length, letter; i < n; i++) {
293 letter = letters[i].replace('&', '&');
294 heading += letter.trim() ? '' + i + '">' + letter + '' : ' ';
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
블 로그 js, jquery, css, html 5 필터 http://www.cnblogs.com/roucheng/p/texiao.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Is Eclipse IDE dying?In 2014 the Eclipse IDE is the leading development environment for Java with a market share of approximately 65%. but ac...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
