Effect URL: http://keleyi.com/keleyi/phtml/html5/5.htm
Code:
HTML code
- <! DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>2015 New Year's Day to a dazzling HTML5 effects-keeper </title><base target="_blank" />
- <script type="Text/javascript"> window.onload = function () { /c14>
- C =Math.Cos;S =Math.sin;U =0;W =Windowj =DocumentD =J.getelementbyid ("Kele" + "yi_com");c =D.getcontext ("2d");W =d.width = w.innerwidth; h = d.height = w.innerheight; c.fillrect (0, 0, w, h); c.globalcompositeoperation = "lighter"; c.linewidth = 0.2; c.linecap = "round"; var bool = < Span class= "Attribute-value" >0, t = 0; d.onmousemove = function (e) {
- if (window. T) {
- if (d = = 9) { d = math.random () *, f (1);}
- Cleartimeout (T);
- }
- X =E.pagex;Y =E.pagey;A =0;b =0;A =XB =Yr = (e.pagex / w * 999 >> 0) / 999; r = (e.pagey / h * 999 >> 0) / 999; u = e.pagex / h * 360 >> 0; d = 9; g = 360 * math.pi / 180; t = SetInterval (f = function (e) {
- C.save (); c.globalcompositeoperation = "Source-over", if (E! = 1) { C.fillstyle = "Rgba (0,0,0,0.02)"; C.fillrect (0, 0, W, H); }
- C.restore (); i = + ; while (i--) {
- C.beginpath (); if (D > | | bool) {
- if (!bool) { bool = 1;}
- if (D < 0.1) { bool = 0;}
- T- = g; D- = 0.1;
- }
- if (!bool) {T + = g; D + = 0.1; }
- q = (r / r - 1) * t; x = (r - r) * c (t) + d * c (q) + (a + (x - a) * (i / 25)) + (r - r); < span class= "attribute" >y = (r - r) * s (t) - d * s (q) + (b + (y - b) * (i / 25)); if (a) { c.moveto ( A,&NBSP;B); c.lineto (x, y) }
- C.strokestyle = "Hsla (" + (U% 360) + ", 100%,50%,0.75)"; C.stroke (); a = x; B = y;
- }
- U- = 0.5; A = X; B = Y;
- }, 16);
- }
- J.onkeydown = function (e) { a = b = 0; R + = 0.05}
- D.onmousemove ({pagex:300, pagey:290})
- }</script>
- <style>body{margin:0;overflow:hidden}div{padding:1px 5px;background: #333;p osition:absolute; Z-index:2;color: #555; Font-family:arial}a{color: #ccf}a:hover{color:red}</style>
- </head>
- <body>
- <Div><a href= "http://keleyi.com/" span class= "tag" >> home </a> <a href= "http://keleyi.com/a/bjad/8e9jd0u5.htm" > original </a> < a href= http://keleyi.com/ keleyi/phtml/"> Effect library </a> What can 1kb's JavaScript do? </div>
- <div id="text"></div>
- <canvas id="keleyi_com"></canvas>
- </body>
- </html>
Effects:
2015 New Year's Day to a dazzling HTML5 effects
