JS跟随鼠标光标特效(源码)

前言

这个特效其实网上早就有了,只是最近在逛别人的博客(初's Blog)时候才看到,鼠标移动时会有炫彩的小星星跟随显示,也是一种蛮特别的,增加博客趣味性的效果。可以看到并没有用在博客上,因为移动端出现冲突,搭配起来也不合适。但是每个人博客是不一样的,或许正合适你。

效果预览


演示站:JS鼠标跟随特效

创建JS文件

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
115
116
117
/**
Template Name: 滑动小星星
Blog:http://mlldxe.cn/
author: _犬's
url: http://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)
    }
 
    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 = "*";
        this.lifeSpan = 200;
        this.initialStyles = {
            "position": "fixed",
            "top": "0",
            "display": "block",
            "pointerEvents": "none",
            "z-index": "99999999",
            "fontSize": "16px",
            "will-change": "transform"
        };
        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;
            this.element = document.createElement('span');
            this.element.innerHTML = this.character;
            applyProperties(this.element, this.initialStyles);
            this.update();
            document.body.appendChild(this.element)
        };
        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()
})();

使用方法

添加这段代码(可压缩一下)

1
<script src="http://blog.mlldxe.cn/cursor-effects.js"></script>

下载地址

本地下载


>>原创文章,欢迎转载。转载请注明:转载自Mlldxe's Blog,谢谢!
>>原文链接地址:JS跟随鼠标光标特效(源码)
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注