javascript - How to make animated cursor in a website -

i've tried css cursor property

how create cursor webpage

https://my.pottermore.com/patronus

you can create such effects using css , javascript:

var standardbody=(document.compatmode=="css1compat")? document.documentelement : document.body //create reference common "body" across doctypes    var nav = (!document.all || window.opera);  var tmr = null;  var spd = 50;  var x = 0;  var x_offset = 5;  var y = 0;  var y_offset = 15;    document.onmousemove = get_mouse;     function get_mouse(e)  {        x = (nav) ? e.pagex : event.clientx+standardbody.scrollleft;    y = (nav) ? e.pagey : event.clienty+standardbody.scrolltop;    x += x_offset;    y += y_offset;    beam(1);       }    function beam(n)  {    if(n<5)    {  				document.getelementbyid('div'+n).style.top=y+'px'  				document.getelementbyid('div'+n).style.left=x+'px'  				document.getelementbyid('div'+n).style.visibility='visible'      n++;      tmr=settimeout("beam("+n+")",spd);    }    else    {       cleartimeout(tmr);       fade(4);    }     }     function fade(n)  {    if(n>0)     {  				document.getelementbyid('div'+n).style.visibility='hidden'      n--;      tmr=settimeout("fade("+n+")",spd);    }    else cleartimeout(tmr);  } 

body{  overflow-x:hidden;  }    .s1  {    position  : absolute;    font-size : 10pt;    color     : blue;    visibility: hidden;  }    .s2  {    position  : absolute;    font-size : 18pt;    color     : red;  	visibility : hidden;  }    .s3  {    position  : absolute;    font-size : 14pt;    color     : gold;  	visibility : hidden;  }    .s4  {    position  : absolute;    font-size : 12pt;    color     : lime;  	visibility : hidden;  }

<div id="div1" class="s1">*</div>  <div id="div2" class="s2">*</div>  <div id="div3" class="s3">*</div>  <div id="div4" class="s4">*</div>

code can found at: http://www.javascriptkit.com/script/script2/sparkler.shtml

or if not want use html elements mouse trails can use following css , js:

var dots = [],      mouse = {        x: 0,        y: 0      };    var dot = function() {    this.x = 0;    this.y = 0;    this.node = (function(){      var n = document.createelement("div");      n.classname = "tail";      document.body.appendchild(n);      return n;    }());  };  dot.prototype.draw = function() {    this.node.style.left = this.x + "px";    this.node.style.top = this.y + "px";  };    (var = 0; < 12; i++) {    var d = new dot();    dots.push(d);  }    function draw() {    var x = mouse.x,        y = mouse.y;        dots.foreach(function(dot, index, dots) {      var nextdot = dots[index + 1] || dots[0];            dot.x = x;      dot.y = y;      dot.draw();      x += (nextdot.x - dot.x) * .6;      y += (nextdot.y - dot.y) * .6;      });  }    addeventlistener("mousemove", function(event) {    mouse.x = event.pagex;    mouse.y = event.pagey;  });    function animate() {    draw();    requestanimationframe(animate);  }    animate();

.tail {      position: absolute;      height: 6px; width: 6px;      border-radius: 3px;      background: tomato;    }

code can found @ : https://codepen.io/falldowngoboone/pen/pwzpyv