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

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

 

另外推荐一款类似特效：

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

效果图：

以下是源代码：

  1.   1 <!DOCTYPE html>
  2.   2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.   3 <head>
  4.   4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   5 <title>html5跟随鼠标炫酷网站引导页动画 - 何问起</title>
  6.   6 <link href="http://hovertree.com/texiao/html5/index/hovertreewelcome.css" type="text/css" rel="stylesheet" />
  7.   7 </head>
  8.   8 <body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
  9.   9 
  10.  10 <div id="hovertreecontainer">
  11.  11 
  12.  12 <div>
  13.  13 <h1 id="h1">何问起 </h1>
  14.  14 <h2 id="h2"> 想问候，不知从何问起，就直接说喜欢你！</h2>
  15.  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.  16 <p>&nbsp;</p>
  17.  17 <p><strong><a href="http://hovertree.com/">进入主站</a></strong></p>
  18.  18 <p>&nbsp;</p>
  19.  19 <p>&nbsp;</p>
  20.  20 <p>&nbsp;</p>
  21.  21 <p>&nbsp;</p>
  22.  22 <p>&nbsp;</p>
  23.  23 </div>
  24.  24 
  25.  25 </div>
  26.  26 
  27.  27 <canvas id="canvas"></canvas>
  28.  28 <audio autoplay="autoplay">
  29.  29 <source src="http://hovertree.com" type="audio/ogg">
  30.  30 <source src="http://cms.hovertree.com/hovertreesound/hovertreexihuanni.mp3" type="audio/mpeg">
  31.  31 您的浏览器不支持播放音乐。请用支持html5的浏览器打开,例如chrome或火狐或者新版IE等。
  32.  32 <br />何问起 hovertree.com
  33.  33 </audio><script type="text/javascript" src="http://hovertree.com/texiao/html5/index/hovertreewelcome.js">
  34.  34 </script>
  35.  35 <script type="text/javascript">
  36.  36 
  37.  37 ; (function (window) {
  38.  38 
  39.  39 var ctx,
  40.  40 hue,
  41.  41 logo,
  42.  42 form,
  43.  43 buffer,
  44.  44 target = {},
  45.  45 tendrils = [],
  46.  46 settings = {};
  47.  47 
  48.  48 settings.debug = true;
  49.  49 settings.friction = 0.5;
  50.  50 settings.trails = 20;
  51.  51 settings.size = 50;
  52.  52 settings.dampening = 0.25;
  53.  53 settings.tension = 0.98;
  54.  54 
  55.  55 Math.TWO_PI = Math.PI * 2;
  56.  56 
  57.  57 // ========================================================================================
  58.  58 // Oscillator 何问起
  59.  59 // ----------------------------------------------------------------------------------------
  60.  60 
  61.  61 function Oscillator(options) {
  62.  62 this.init(options || {});
  63.  63 }
  64.  64 
  65.  65 Oscillator.prototype = (function () {
  66.  66 
  67.  67 var value = 0;
  68.  68 
  69.  69 return {
  70.  70 
  71.  71 init: function (options) {
  72.  72 this.phase = options.phase || 0;
  73.  73 this.offset = options.offset || 0;
  74.  74 this.frequency = options.frequency || 0.001;
  75.  75 this.amplitude = options.amplitude || 1;
  76.  76 },
  77.  77 
  78.  78 update: function () {
  79.  79 this.phase += this.frequency;
  80.  80 value = this.offset + Math.sin(this.phase) * this.amplitude;
  81.  81 return value;
  82.  82 },
  83.  83 
  84.  84 value: function () {
  85.  85 return value;
  86.  86 }
  87.  87 };
  88.  88 
  89.  89 })();
  90.  90 
  91.  91 // ========================================================================================
  92.  92 // Tendril hovertree.com
  93.  93 // ----------------------------------------------------------------------------------------
  94.  94 
  95.  95 function Tendril(options) {
  96.  96 this.init(options || {});
  97.  97 }
  98.  98 
  99.  99 Tendril.prototype = (function () {
  100. 100 
  101. 101 function Node() {
  102. 102 this.x = 0;
  103. 103 this.y = 0;
  104. 104 this.vy = 0;
  105. 105 this.vx = 0;
  106. 106 }
  107. 107 
  108. 108 return {
  109. 109 
  110. 110 init: function (options) {
  111. 111 
  112. 112 this.spring = options.spring + (Math.random() * 0.1) - 0.05;
  113. 113 this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
  114. 114 this.nodes = [];
  115. 115 
  116. 116 for (var i = 0, node; i < settings.size; i++) {
  117. 117 
  118. 118 node = new Node();
  119. 119 node.x = target.x;
  120. 120 node.y = target.y;
  121. 121 
  122. 122 this.nodes.push(node);
  123. 123 }
  124. 124 },
  125. 125 
  126. 126 update: function () {
  127. 127 
  128. 128 var spring = this.spring,
  129. 129 node = this.nodes[0];
  130. 130 
  131. 131 node.vx += (target.x - node.x) * spring;
  132. 132 node.vy += (target.y - node.y) * spring;
  133. 133 
  134. 134 for (var prev, i = 0, n = this.nodes.length; i < n; i++) {
  135. 135 
  136. 136 node = this.nodes[i];
  137. 137 
  138. 138 if (i > 0) {
  139. 139 
  140. 140 prev = this.nodes[i - 1];
  141. 141 
  142. 142 node.vx += (prev.x - node.x) * spring;
  143. 143 node.vy += (prev.y - node.y) * spring;
  144. 144 node.vx += prev.vx * settings.dampening;
  145. 145 node.vy += prev.vy * settings.dampening;
  146. 146 }
  147. 147 
  148. 148 node.vx *= this.friction;
  149. 149 node.vy *= this.friction;
  150. 150 node.x += node.vx;
  151. 151 node.y += node.vy;
  152. 152 
  153. 153 spring *= settings.tension;
  154. 154 }
  155. 155 },
  156. 156 
  157. 157 draw: function () {
  158. 158 
  159. 159 var x = this.nodes[0].x,
  160. 160 y = this.nodes[0].y,
  161. 161 a, b;
  162. 162 
  163. 163 ctx.beginPath();
  164. 164 ctx.moveTo(x, y);
  165. 165 
  166. 166 for (var i = 1, n = this.nodes.length - 2; i < n; i++) {
  167. 167 
  168. 168 a = this.nodes[i];
  169. 169 b = this.nodes[i + 1];
  170. 170 x = (a.x + b.x) * 0.5;
  171. 171 y = (a.y + b.y) * 0.5;
  172. 172 
  173. 173 ctx.quadraticCurveTo(a.x, a.y, x, y);
  174. 174 }
  175. 175 
  176. 176 a = this.nodes[i];
  177. 177 b = this.nodes[i + 1];
  178. 178 
  179. 179 ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
  180. 180 ctx.stroke();
  181. 181 ctx.closePath();
  182. 182 }
  183. 183 };
  184. 184 
  185. 185 })();
  186. 186 
  187. 187 // ----------------------------------------------------------------------------------------
  188. 188 
  189. 189 function init(event) {
  190. 190 
  191. 191 document.removeEventListener(\'mousemove\', init);
  192. 192 document.removeEventListener(\'touchstart\', init);
  193. 193 
  194. 194 document.addEventListener(\'mousemove\', mousemove);
  195. 195 document.addEventListener(\'touchmove\', mousemove);
  196. 196 document.addEventListener(\'touchstart\', touchstart);
  197. 197 
  198. 198 mousemove(event);
  199. 199 reset();
  200. 200 loop();
  201. 201 }
  202. 202 
  203. 203 function reset() {
  204. 204 
  205. 205 tendrils = [];
  206. 206 
  207. 207 for (var i = 0; i < settings.trails; i++) {
  208. 208 
  209. 209 tendrils.push(new Tendril({
  210. 210 spring: 0.45 + 0.025 * (i / settings.trails)
  211. 211 }));
  212. 212 }
  213. 213 }
  214. 214 
  215. 215 function loop() {
  216. 216 
  217. 217 if (!ctx.running) return;
  218. 218 
  219. 219 ctx.globalCompositeOperation = \'source-over\';
  220. 220 ctx.fillStyle = \'rgba(8,5,16,0.4)\';
  221. 221 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  222. 222 ctx.globalCompositeOperation = \'lighter\';
  223. 223 ctx.strokeStyle = \'hsla(\' + Math.round(hue.update()) + \',90%,50%,0.25)\';
  224. 224 ctx.lineWidth = 1;
  225. 225 
  226. 226 if (ctx.frame % 60 == 0) {
  227. 227 console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
  228. 228 }
  229. 229 
  230. 230 for (var i = 0, tendril; i < settings.trails; i++) {
  231. 231 tendril = tendrils[i];
  232. 232 tendril.update();
  233. 233 tendril.draw();
  234. 234 }
  235. 235 
  236. 236 ctx.frame++;
  237. 237 ctx.stats.update();
  238. 238 requestAnimFrame(loop);
  239. 239 }
  240. 240 
  241. 241 function resize() {
  242. 242 ctx.canvas.width = window.innerWidth;
  243. 243 ctx.canvas.height = window.innerHeight;
  244. 244 }
  245. 245 
  246. 246 function start() {
  247. 247 if (!ctx.running) {
  248. 248 ctx.running = true;
  249. 249 loop();
  250. 250 }
  251. 251 }
  252. 252 
  253. 253 function stop() {
  254. 254 ctx.running = false;
  255. 255 }
  256. 256 
  257. 257 function mousemove(event) {
  258. 258 if (event.touches) {
  259. 259 target.x = event.touches[0].pageX;
  260. 260 target.y = event.touches[0].pageY;
  261. 261 } else {
  262. 262 target.x = event.clientX
  263. 263 target.y = event.clientY;
  264. 264 }
  265. 265 event.preventDefault();
  266. 266 }
  267. 267 
  268. 268 function touchstart(event) {
  269. 269 if (event.touches.length == 1) {
  270. 270 target.x = event.touches[0].pageX;
  271. 271 target.y = event.touches[0].pageY;
  272. 272 }
  273. 273 }
  274. 274 
  275. 275 function keyup(event) {
  276. 276 
  277. 277 switch (event.keyCode) {
  278. 278 case 32:
  279. 279 save();
  280. 280 break;
  281. 281 default:
  282. 282 // console.log(event.keyCode); hovertree.com
  283. 283 }
  284. 284 }
  285. 285 
  286. 286 function letters(id) {
  287. 287 
  288. 288 var el = document.getElementById(id),
  289. 289 letters = el.innerHTML.replace(\'&amp;\', \'&\').split(\'\'),
  290. 290 heading = \'\';
  291. 291 
  292. 292 for (var i = 0, n = letters.length, letter; i < n; i++) {
  293. 293 letter = letters[i].replace(\'&\', \'&amp\');
  294. 294 heading += letter.trim() ? \'<span class="letter-\' + i + \'">\' + letter + \'</span>\' : \'&nbsp;\';
  295. 295 }
  296. 296 
  297. 297 el.innerHTML = heading;
  298. 298 setTimeout(function () {
  299. 299 el.className = \'transition-in\';
  300. 300 }, (Math.random() * 500) + 500);
  301. 301 }
  302. 302 
  303. 303 function save() {
  304. 304 
  305. 305 if (!buffer) {
  306. 306 
  307. 307 buffer = document.createElement(\'canvas\');
  308. 308 buffer.width = screen.availWidth;
  309. 309 buffer.height = screen.availHeight;
  310. 310 buffer.ctx = buffer.getContext(\'2d\');
  311. 311 
  312. 312 form = document.createElement(\'form\');
  313. 313 form.method = \'post\';
  314. 314 form.input = document.createElement(\'input\');
  315. 315 form.input.type = \'hidden\';
  316. 316 form.input.name = \'data\';
  317. 317 form.appendChild(form.input);
  318. 318 
  319. 319 document.body.appendChild(form);
  320. 320 }
  321. 321 
  322. 322 buffer.ctx.fillStyle = \'rgba(8,5,16)\';
  323. 323 buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);
  324. 324 
  325. 325 buffer.ctx.drawImage(canvas,
  326. 326 Math.round(buffer.width / 2 - canvas.width / 2),
  327. 327 Math.round(buffer.height / 2 - canvas.height / 2)
  328. 328 );
  329. 329 
  330. 330 buffer.ctx.drawImage(logo,
  331. 331 Math.round(buffer.width / 2 - logo.width / 4),
  332. 332 Math.round(buffer.height / 2 - logo.height / 4),
  333. 333 logo.width / 2,
  334. 334 logo.height / 2
  335. 335 );
  336. 336 
  337. 337 window.open(buffer.toDataURL(), \'wallpaper\', \'top=0,left=0,width=\' + buffer.width + \',height=\' + buffer.height);
  338. 338 
  339. 339 // form.input.value = buffer.toDataURL().substr(22);
  340. 340 // form.submit(); hovertree.com
  341. 341 }
  342. 342 
  343. 343 window.requestAnimFrame = (function () {
  344. 344 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) { window.setTimeout(fn, 1000 / 60) };
  345. 345 })();
  346. 346 
  347. 347 window.onload = function () {
  348. 348 
  349. 349 ctx = document.getElementById(\'canvas\').getContext(\'2d\');
  350. 350 ctx.stats = new Stats();
  351. 351 ctx.running = true;
  352. 352 ctx.frame = 1;
  353. 353 
  354. 354 logo = new Image();
  355. 355 logo.src = \'ht\' + \'tp://ho\' + \'vertree.c\' + \'om/themes/hvtimages/hvtlogo.p\' + \'ng\';
  356. 356 
  357. 357 hue = new Oscillator({
  358. 358 phase: Math.random() * Math.TWO_PI,
  359. 359 amplitude: 85,
  360. 360 frequency: 0.0015,
  361. 361 offset: 285
  362. 362 });
  363. 363 
  364. 364 letters(\'h1\');
  365. 365 letters(\'h2\');
  366. 366 
  367. 367 document.addEventListener(\'mousemove\', init);
  368. 368 document.addEventListener(\'touchstart\', init);
  369. 369 document.body.addEventListener(\'orientationchange\', resize);
  370. 370 window.addEventListener(\'resize\', resize);
  371. 371 window.addEventListener(\'keyup\', keyup);
  372. 372 window.addEventListener(\'focus\', start);
  373. 373 window.addEventListener(\'blur\', stop);
  374. 374 
  375. 375 resize();
  376. 376 
  377. 377 if (window.DEBUG) {
  378. 378 
  379. 379 var gui = new dat.GUI();
  380. 380 
  381. 381 // gui.add(settings, \'debug\');
  382. 382 settings.gui.add(settings, \'trails\', 1, 30).onChange(reset);
  383. 383 settings.gui.add(settings, \'size\', 25, 75).onFinishChange(reset);
  384. 384 settings.gui.add(settings, \'friction\', 0.45, 0.55).onFinishChange(reset);
  385. 385 settings.gui.add(settings, \'dampening\', 0.01, 0.4).onFinishChange(reset);
  386. 386 settings.gui.add(settings, \'tension\', 0.95, 0.999).onFinishChange(reset);
  387. 387 
  388. 388 document.body.appendChild(ctx.stats.domElement);
  389. 389 }
  390. 390 };
  391. 391 
  392. 392 })(window);
  393. 393 
  394. 394 </script>
  395. 395 </body>
  396. 396 </html>

今天大雪，你那里下雪了吗？http://hovertree.com/texiao/js/snow.htm

博客园 roucheng js,jquery,css,html5特效 http://www.cnblogs.com/roucheng/p/texiao.html

版权声明：本文为roucheng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/roucheng/p/welcome.html