html5跟隨滑鼠炫酷網站引導頁動畫特效
阿新 • • 發佈：2019-01-18
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[