UDN-企业互联网技术人气社区
UDN 企业互联网技术社区 前端精选 HTML5精选 跟随鼠标炫酷网站引导页的html5动画特效

跟随鼠标炫酷网站引导页的html5动画特效

genie1003 论坛 2016-5-4 10:27
分享到:
摘要: 跟随鼠标炫酷网站引导页的html5动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹。html5炫酷网站引导页,鼠标跟随出特效。
  跟随鼠标炫酷网站引导页的html5动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹。

  html5炫酷网站引导页,鼠标跟随出特效。

  效果图:
1.jpg

  以下是源代码
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  2. <title>html5跟随鼠标炫酷网站引导页动画 - 何问起</title>
  3. <link href="http://hovertree.com/texiao/html5/index/hovertree**.css" type="text/css" rel="stylesheet">



  4. <div id="hovertreecontainer">

  5. <div>
  6. <h1 id="h1">何问起 </h1>
  7. <h2 id="h2"> 想问候,不知从何问起,就直接说喜欢你!</h2>
  8. <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>
  9. <p> </p>
  10. <p><strong><a href="http://hovertree.com/">进入主站</a></strong></p>
  11. <p> </p>
  12. <p> </p>
  13. <p> </p>
  14. <p> </p>
  15. <p> </p>
  16. </div>

  17. </div>

  18. <canvas id="canvas"></canvas>
  19. <audio autoplay="autoplay">
  20. <source src="http://hovertree.com" type="audio/ogg">
  21. <source src="http://cms.hovertree.com/hovertreesound/hovertreexihuanni.mp3" type="audio/mpeg">
  22. 您的浏览器不支持播放音乐。请用支持html5的浏览器打开,例如chrome或火狐或者新版IE等。
  23. <br>何问起 hovertree.com
  24. </audio><script type="text/JavaScript" src="http://hovertree.com/texiao/html5/index/hovertree**.js">
  25. </script>
  26. <script type="text/JavaScript">

  27. ; (function (window) {

  28. var ctx,
  29. hue,
  30. logo,
  31. form,
  32. buffer,
  33. target = {},
  34. tendrils = [],
  35. settings = {};

  36. settings.debug = true;
  37. settings.friction = 0.5;
  38. settings.trails = 20;
  39. settings.size = 50;
  40. settings.dampening = 0.25;
  41. settings.tension = 0.98;

  42. Math.TWO_PI = Math.PI * 2;

  43. // ========================================================================================
  44. // Oscillator 何问起
  45. // ----------------------------------------------------------------------------------------

  46. function Oscillator(options) {
  47. this.init(options || {});
  48. }

  49. Oscillator.prototype = (function () {

  50. var value = 0;

  51. return {

  52. init: function (options) {
  53. this.phase = options.phase || 0;
  54. this.offset = options.offset || 0;
  55. this.frequency = options.frequency || 0.001;
  56. this.amplitude = options.amplitude || 1;
  57. },

  58. update: function () {
  59. this.phase += this.frequency;
  60. value = this.offset + Math.sin(this.phase) * this.amplitude;
  61. return value;
  62. },

  63. value: function () {
  64. return value;
  65. }
  66. };

  67. })();

  68. // ========================================================================================
  69. // Tendril hovertree.com
  70. // ----------------------------------------------------------------------------------------

  71. function Tendril(options) {
  72. this.init(options || {});
  73. }

  74. Tendril.prototype = (function () {

  75. function Node() {
  76. this.x = 0;
  77. this.y = 0;
  78. this.vy = 0;
  79. this.vx = 0;
  80. }

  81. return {

  82. init: function (options) {

  83. this.spring = options.spring + (Math.random() * 0.1) - 0.05;
  84. this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
  85. this.nodes = [];

  86. for (var i = 0, node; i < settings.size; i++) {

  87. node = new Node();
  88. node.x = target.x;
  89. node.y = target.y;

  90. this.nodes.push(node);
  91. }
  92. },

  93. update: function () {

  94. var spring = this.spring,
  95. node = this.nodes[0];

  96. node.vx += (target.x - node.x) * spring;
  97. node.vy += (target.y - node.y) * spring;

  98. for (var prev, i = 0, n = this.nodes.length; i < n; i++) {

  99. node = this.nodes[i];

  100. if (i > 0) {

  101. prev = this.nodes[i - 1];

  102. node.vx += (prev.x - node.x) * spring;
  103. node.vy += (prev.y - node.y) * spring;
  104. node.vx += prev.vx * settings.dampening;
  105. node.vy += prev.vy * settings.dampening;
  106. }

  107. node.vx *= this.friction;
  108. node.vy *= this.friction;
  109. node.x += node.vx;
  110. node.y += node.vy;

  111. spring *= settings.tension;
  112. }
  113. },

  114. draw: function () {

  115. var x = this.nodes[0].x,
  116. y = this.nodes[0].y,
  117. a, b;

  118. ctx.beginPath();
  119. ctx.moveTo(x, y);

  120. for (var i = 1, n = this.nodes.length - 2; i < n; i++) {

  121. a = this.nodes[i];
  122. b = this.nodes[i + 1];
  123. x = (a.x + b.x) * 0.5;
  124. y = (a.y + b.y) * 0.5;

  125. ctx.quadraticCurveTo(a.x, a.y, x, y);
  126. }

  127. a = this.nodes[i];
  128. b = this.nodes[i + 1];

  129. ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
  130. ctx.stroke();
  131. ctx.closePath();
  132. }
  133. };

  134. })();

  135. // ----------------------------------------------------------------------------------------

  136. function init(event) {

  137. document.removeEventListener('mousemove', init);
  138. document.removeEventListener('touchstart', init);

  139. document.addEventListener('mousemove', mousemove);
  140. document.addEventListener('touchmove', mousemove);
  141. document.addEventListener('touchstart', touchstart);

  142. mousemove(event);
  143. reset();
  144. loop();
  145. }

  146. function reset() {

  147. tendrils = [];

  148. for (var i = 0; i < settings.trails; i++) {

  149. tendrils.push(new Tendril({
  150. spring: 0.45 + 0.025 * (i / settings.trails)
  151. }));
  152. }
  153. }

  154. function loop() {

  155. if (!ctx.running) return;

  156. ctx.globalCompositeOperation = 'source-over';
  157. ctx.fillStyle = 'rgba(8,5,16,0.4)';
  158. ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  159. ctx.globalCompositeOperation = 'lighter';
  160. ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';
  161. ctx.lineWidth = 1;

  162. if (ctx.frame % 60 == 0) {
  163. console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
  164. }

  165. for (var i = 0, tendril; i < settings.trails; i++) {
  166. tendril = tendrils[i];
  167. tendril.update();
  168. tendril.draw();
  169. }

  170. ctx.frame++;
  171. ctx.stats.update();
  172. requestAnimFrame(loop);
  173. }

  174. function resize() {
  175. ctx.canvas.width = window.innerWidth;
  176. ctx.canvas.height = window.innerHeight;
  177. }

  178. function start() {
  179. if (!ctx.running) {
  180. ctx.running = true;
  181. loop();
  182. }
  183. }

  184. function stop() {
  185. ctx.running = false;
  186. }

  187. function mousemove(event) {
  188. if (event.touches) {
  189. target.x = event.touches[0].pageX;
  190. target.y = event.touches[0].pageY;
  191. } else {
  192. target.x = event.clientX
  193. target.y = event.clientY;
  194. }
  195. event.preventDefault();
  196. }

  197. function touchstart(event) {
  198. if (event.touches.length == 1) {
  199. target.x = event.touches[0].pageX;
  200. target.y = event.touches[0].pageY;
  201. }
  202. }

  203. function keyup(event) {

  204. switch (event.keyCode) {
  205. case 32:
  206. save();
  207. break;
  208. default:
  209. // console.log(event.keyCode); hovertree.com
  210. }
  211. }

  212. function letters(id) {

  213. var el = document.getElementById(id),
  214. letters = el.innerHTML.replace('&', '&').split(''),
  215. heading = '';

  216. for (var i = 0, n = letters.length, letter; i < n; i++) {
  217. letter = letters[i].replace('&', '&');
  218. heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : ' ';
  219. }

  220. el.innerHTML = heading;
  221. setTimeout(function () {
  222. el.className = 'transition-in';
  223. }, (Math.random() * 500) + 500);
  224. }

  225. function save() {

  226. if (!buffer) {

  227. buffer = document.createElement('canvas');
  228. buffer.width = screen.availWidth;
  229. buffer.height = screen.availHeight;
  230. buffer.ctx = buffer.getContext('2d');

  231. form = document.createElement('form');
  232. form.method = 'post';
  233. form.input = document.createElement('input');
  234. form.input.type = 'hidden';
  235. form.input.name = 'data';
  236. form.appendChild(form.input);

  237. document.body.appendChild(form);
  238. }

  239. buffer.ctx.fillStyle = 'rgba(8,5,16)';
  240. buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);

  241. buffer.ctx.drawImage(canvas,
  242. Math.round(buffer.width / 2 - canvas.width / 2),
  243. Math.round(buffer.height / 2 - canvas.height / 2)
  244. );

  245. buffer.ctx.drawImage(logo,
  246. Math.round(buffer.width / 2 - logo.width / 4),
  247. Math.round(buffer.height / 2 - logo.height / 4),
  248. logo.width / 2,
  249. logo.height / 2
  250. );

  251. window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height);

  252. // form.input.value = buffer.toDataURL().substr(22);
  253. // form.submit(); hovertree.com
  254. }

  255. window.requestAnimFrame = (function () {
  256. return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (fn) { window.setTimeout(fn, 1000 / 60) };
  257. })();

  258. window.onload = function () {

  259. ctx = document.getElementById('canvas').getContext('2d');
  260. ctx.stats = new Stats();
  261. ctx.running = true;
  262. ctx.frame = 1;

  263. logo = new Image();
  264. logo.src = 'ht' + 'tp://ho' + 'vertree.c' + 'om/themes/hvtimages/hvtlogo.p' + 'ng';

  265. hue = new Oscillator({
  266. phase: Math.random() * Math.TWO_PI,
  267. amplitude: 85,
  268. frequency: 0.0015,
  269. offset: 285
  270. });

  271. letters('h1');
  272. letters('h2');

  273. document.addEventListener('mousemove', init);
  274. document.addEventListener('touchstart', init);
  275. document.body.addEventListener('orientationchange', resize);
  276. window.addEventListener('resize', resize);
  277. window.addEventListener('keyup', keyup);
  278. window.addEventListener('focus', start);
  279. window.addEventListener('blur', stop);

  280. resize();

  281. if (window.DEBUG) {

  282. var gui = new dat.GUI();

  283. // gui.add(settings, 'debug');
  284. settings.gui.add(settings, 'trails', 1, 30).onChange(reset);
  285. settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset);
  286. settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset);
  287. settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset);
  288. settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset);

  289. document.body.appendChild(ctx.stats.domElement);
  290. }
  291. };

  292. })(window);

  293. </script>
复制代码

相关阅读

分享到:
已有2条评论

最新评论

时间和梦想
LZ敢整点更有创意的不?兄弟们等着围观捏~
等你懂了却迟了
不错的帖子,支持下

一周焦点

关注我们:
关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
返回顶部