Mouse Trail (Cursor Trail)
Here's the CSS code:
1<script>
2// dots is an array of Dot objects,
3// mouse is an object used to track the X and Y position
4 // of the mouse, set with a mousemove event listener below
5var dots = [],
6 mouse = {
7 x: 0,
8 y: 0
9 };
10
11// The Dot object used to scaffold the dots
12var Dot = function() {
13 this.x = 0;
14 this.y = 0;
15 this.node = (function(){
16 var n = document.createElement("div");
17 n.className = "trail";
18 document.body.appendChild(n);
19 return n;
20 }());
21};
22// The Dot.prototype.draw() method sets the position of
23 // the object's <div> node
24Dot.prototype.draw = function() {
25 this.node.style.left = this.x + "px";
26 this.node.style.top = this.y + "px";
27};
28
29// Creates the Dot objects, populates the dots array
30for (var i = 0; i < 12; i++) {
31 var d = new Dot();
32 dots.push(d);
33}
34
35// This is the screen redraw function
36function draw() {
37 // Make sure the mouse position is set everytime
38 // draw() is called.
39 var x = mouse.x,
40 y = mouse.y;
41
42 // This loop is where all the 90s magic happens
43 dots.forEach(function(dot, index, dots) {
44 var nextDot = dots[index + 1] || dots[0];
45
46 dot.x = x;
47 dot.y = y;
48 dot.draw();
49 x += (nextDot.x - dot.x) * .6;
50 y += (nextDot.y - dot.y) * .6;
51
52 });
53}
54
55addEventListener("mousemove", function(event) {
56 //event.preventDefault();
57 mouse.x = event.pageX;
58 mouse.y = event.pageY;
59});
60
61// animate() calls draw() then recursively calls itself
62 // everytime the screen repaints via requestAnimationFrame().
63function animate() {
64 draw();
65 requestAnimationFrame(animate);
66}
67
68// And get it started by calling animate().
69animate();
70</script>
Here's the Script you need to add in the "before Body "
1<style>
2 .trail {
3 position: absolute;
4 height: 20px;
5 width: 20px;
6 border-radius: 100%;
7 background: #8f00ff;
8 }
9</style>