JS follows mouse cursor effects (source code)

Preface

This special effect has been online for a long time. (initial's Blog) Only then can you see that when the mouse moves, there will be a colorful little star to follow. It is also a very special way to increase the interest of blogs. It can be seen that it is not used in blogs, because the conflict between mobile terminals is not appropriate. But everyone's blog is different. Maybe it's right for you.

Effect preview


Demonstration station: JS mouse follows special effects

Create JS file

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
1 15
116
117
 /**
Template Name: sliding small star 
Blog: Https://mlldxe.cn/
 Author: Dog's
url: Https://mlldxe.cn/archives/526
 * / function (fairyDustCursor {
var) possibleColors = "#D61C59", "#E7D84B", "#1B8798"]
var width = Window.innerWidth ; 
var height = Window.innerHeight ; 
var cursor = {
x: width / 2, 
y: width / 2
}; 
var particles =]; 
function init () {
bindEvents (); 
loop () {}} 
function bindEvents () {}. Document.addEventListener ('mousemove', onMouseMove) Document.addEventListener ('touchmove', onTouchMove) Document.addEventListener ('touchstart', onTouchMove) Window.addEventListener ('resize', OnWindowResize) 
function onWindowResize (E) {
width = Window.innerWidth ; 
height = Window.innerHeight
 } 
function onTouchMove (E) {
if (e.) Touches.length > 0) {
for (VaR I = 0; I < E. Touches.length ; i++) {
addParticle (e.touches[i].clientX, e.touches[i].clientY, PossibleColors[ Math.floor ( Math.random () * PossibleColors.length 
function onMouseMove (E) {
cursor.x = e.clientX; 
cursor.y = e.clientY; 
addParticle (cursor.x, cursor.y, possibleColors[) Math.floor ( Math.random () * PossibleColors.length 
function addParticle (x, y). Color) {
var particle = new Particle (); Particle.init (x, y, color) Particles.push (particle) updateParticles} 
function updateParticles () {
for (VaR I = 0; I < Particles.length ; i++) {
particles[i].update () 
}
for (VaR I = Particles.length - 1; I > > 0; I--) {
if (particles[i].lifeSpan < 0) {
particles[i].die (); Particles.splice (I, 1) 
function loop () {
requestAnimationFrame (loop); 
updateParticles () {}} 
function Particle () {} This.character = "*"; Wei This.lifeSpan = 200; This.initialStyles = {position ":" fixed "," top ":" 0 "," display ":" display ":" block "," pointerEvents ":" None "," Z-index ":" Z-index ":" 99999999 "," fontSize ":" 16px "," 16px "," will-change ":" fontSize " This.init = function (x). Y, color) { This.velocity = {
x: ( Math.random (< < 0.5? -1: 1) * () Math.random () / 2), 
y: 1
}; This.position = {
x: X - 10, 
y: Y - 20
} This.initialStyles.color = color; Wei This.element = Document.createElement ('span'); This.element.innerHTML = This.character ; 
applyProperties ( This.element , This.initialStyles ) This.update (); Document.body.appendChild ( This.element } Wei This.update = function () { This.position .x + = This.velocity .x; This.position .y + = This.velocity .y; This.lifeSpan - This.element.style .transform = "translate3d (") + This.position .x + "Px," + This.position .y + "PX". 0) scale ("+"). This.lifeSpan 120 + +) This.die = function () { This.element.parentNode .removeChild ( This.element 
function applyProperties (target, properties) {
for (VaR key in properties) {} Target.style [key] = properties[key]
}
}
 
init ()}} ();

Usage method

Add this code (compressible)

 One
 < Script SRC = " Https://blog.mlldxe.cn/cursor-effects.js " > </script>

Download address

Download locally

Give the thumbs-up

Comment

E-mail addresses will not be made public. Required items have been marked with *