js鼠标跟随粒子特效

基础概念

JavaScript鼠标跟随粒子特效是一种常见的网页交互效果，通过JavaScript和CSS实现。当用户在页面上移动鼠标时，页面上的粒子会跟随鼠标移动，从而产生动态的视觉效果。

类型

简单跟随：粒子直接跟随鼠标移动。
复杂路径：粒子沿着复杂的路径移动，可能包括曲线、螺旋等。
交互式粒子：粒子之间或粒子与页面其他元素之间有交互效果。

应用场景

网站首页：吸引用户注意力。
游戏界面：增加游戏的沉浸感。
广告页面：通过动态效果提升广告吸引力。
个人作品展示页：展示开发者的技术水平。

示例代码

以下是一个简单的JavaScript鼠标跟随粒子特效的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Follow Particles</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }
        .particle {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fff;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <script>
        const numParticles = 100;
        const particles = [];

        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 3 + 1;
                this.speedX = Math.random() * 3 - 1.5;
                this.speedY = Math.random() * 3 - 1.5;
                this.element = document.createElement('div');
                this.element.classList.add('particle');
                this.element.style.width = `${this.size}px`;
                this.element.style.height = `${this.size}px`;
                this.element.style.left = `${this.x}px`;
                this.element.style.top = `${this.y}px`;
                document.body.appendChild(this.element);
            }

            update(mouseX, mouseY) {
                const dx = mouseX - this.x;
                const dy = mouseY - this.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                const forceDirectionX = dx / distance;
                const forceDirectionY = dy / distance;
                const maxDistance = 100;
                const force = (maxDistance - distance) / maxDistance;
                const directionX = forceDirectionX * force * 10;
                const directionY = forceDirectionY * force * 10;

                if (distance < maxDistance) {
                    this.x -= directionX;
                    this.y -= directionY;
                } else {
                    this.x += this.speedX;
                    this.y += this.speedY;
                }

                this.element.style.left = `${this.x}px`;
                this.element.style.top = `${this.y}px`;
            }
        }

        function init() {
            for (let i = 0; i < numParticles; i++) {
                const x = Math.random() * window.innerWidth;
                const y = Math.random() * window.innerHeight;
                particles.push(new Particle(x, y));
            }
        }

        function animate(event) {
            for (let i = 0; i < particles.length; i++) {
                particles[i].update(event.clientX, event.clientY);
            }
            requestAnimationFrame(() => animate(event));
        }

        window.addEventListener('mousemove', animate);
        init();
    </script>
</body>
</html>