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)
blank

相关推荐

  • python十进制转二进制函数_python 十六进制转二进制

    python十进制转二进制函数_python 十六进制转二进制Python2python十进制转2进制有内置函数bin方法1:in:bin(1)output:’0b1’方法2:n=int(input(‘请输入要转换进制的数值:’))#x=2#转换为二进制,所以这里取x=2b=[]#存储余数whileTrue:#一直循环,商为0时利用break退出循环…

  • uint16_t转换成char_16bit转8bit

    uint16_t转换成char_16bit转8bit简单来说,uint8_t/uint16_t/uint32_t/uint64_t这些数据类型都只是别名而来,具体如下:一、C语言数据基本类型在C语言中有6种基本数据类型:short、int、long、float、double、char1)整型:shortint、int、longint2)浮点型:float、double3)字符类型:char二、分析uint8_…

  • Eclipse快捷键 l另起一行|快速转换编辑器|重命名|下一个错误及快速修改|为本地变量赋值

    Eclipse快捷键 l另起一行|快速转换编辑器|重命名|下一个错误及快速修改|为本地变量赋值

  • (收藏)【 数字化客户体验】NPS、CSAT和CES——2020年跟踪的客户满意度指标「建议收藏」

    (收藏)【 数字化客户体验】NPS、CSAT和CES——2020年跟踪的客户满意度指标「建议收藏」你每收到一个顾客的投诉,就有大约26个人对你的公司不满,但是他们选择沉默。如果你不采取适当的行动,你很可能会失去这些客户。除了失去客户和收入之外,客户满意度低也会损害你的品牌形象——尤其是当某些客户投诉在网上疯传时。幸运的是,客户满意度测量工具可以帮助你收集有价值的反馈,这样你就可以做出客户真正要求的改变和改进——所有这些都是为了给他们提供更好的体验和更愉快的客户旅程。为了简单起见,我们应该提到客户满意度指标通常也称为CX指标。CX是什么意思?CX代表客户体验。CX的准确定义将客户体验描

  • win10中使用sqlserver2008r2 SQL Server 配置管理器[通俗易懂]

    win10中使用sqlserver2008r2 SQL Server 配置管理器[通俗易懂]win10打开sqlserver2008r2的SQLServer配置管理器,直接运行次文件就可:“C:\Windows\SysWOW64\SQLServerManager10.msc”在win10中是安装sqlserver2008r2,有时候安装成功之后会发现sqlserver的1433端口访问不了,通过sql语句查看端口号,发现找不到1433端口号–查询端口号

  • lrzsz 安装

    lrzsz 安装本文是记录lrzsz的安装过程1、从下面的网站下载lrzsz-1.12.20.tar.gzhttp://www.filewatcher.com/m/lrzsz-0.12.20.tar.gz.280938.0.0.html2、查看里面的INSTALL文档了解安装参数说明和细节3、解压文件tarzxvflrzsz-1.12.20.tar.gz4、进入目录cdlrzs

发表回复

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

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