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

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹。html5炫酷网站引导页,鼠标跟随出特效。体验效果:http://hovertree.com/texi

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

html5跟随鼠标炫酷网站引导页动画特效建议收藏此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

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

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

 

另外推荐一款类似特效:

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

效果图:
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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120692.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号