El Atributo ONMOUSEMOVE

Es un evento HTML que se dispara continuamente mientras el cursor del mouse se mueve sobre un elemento.

El atributo onmousemove es un evento HTML que se dispara continuamente mientras el cursor del mouse se mueve sobre un elemento. Es ideal para crear interacciones dinámicas como sistemas de dibujo, seguimiento de coordenadas o efectos visuales.

Sintaxis Básica

<elemento onmousemove="funcion(event)">

elemento: Cualquier contenedor HTML (<div>, <canvas>, <body>).
event: Objeto del evento que contiene propiedades como coordenadas (clientX, clientY).

Ejemplos Prácticos

Ejemplo 1: Seguimiento de coordenadas

<div onmousemove="mostrarPosicion(event)">
<script>
function mostrarPosicion(e) {
    console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
}
</script>

Resultado: Registra las coordenadas del mouse en tiempo real.

Ejemplo 2: Generador de color interactivo

function cambiarColor(e) {
    const x = (e.offsetX / elemento.width) * 360;
    elemento.style.background = `hsl(${x}, 70%, 50%)`;
}

Efecto: Crea un degradado de color que cambia con el movimiento del mouse.

Ejemplo 3: Lienzo para dibujar

let dibujando = false;

canvas.onmousedown = () => dibujando = true;
canvas.onmousemove = (e) => {
    if (dibujando) {
        // Código para dibujar líneas
    }
};

Nota: Combina onmousemove con onmousedown y onmouseup.

Ejemplo 4: Efecto parallax

elemento.onmousemove = (e) => {
    const x = e.clientX * 0.1;
    const y = e.clientY * 0.1;
    capa.style.transform = `translate(${x}px, ${y}px)`;
};

Uso común: Juegos, interfaces inmersivas.

Buenas Prácticas

Optimiza el rendimiento:

Usa requestAnimationFrame o limita ejecuciones con setTimeout para evitar sobrecarga.

function manejarMovimiento(e) {
    requestAnimationFrame(() => {
        // Código costoso aquí
    });
}

Combina eventos:

Para arrastrar elementos, usa onmousedown + onmousemove + onmouseup.

Accesibilidad:

Proporciona alternativas para dispositivos táctiles (ontouchmove).

Casos de Uso Avanzados

Sistemas de dibujo vectorial
Juegos de precisión (ej: seguir un objetivo en movimiento)
Herramientas de medición en tiempo real
Efectos de partículas interactivas

Compatibilidad

Todos los navegadores modernos incluyendo móviles (con limitaciones en tactil).

Alternativa moderna:

elemento.addEventListener('mousemove', funcion);

Conclusión

El atributo onmousemove abre la puerta a experiencias web altamente interactivas. Desde simples efectos visuales hasta complejas aplicaciones, su versatilidad lo hace esencial en el desarrollo frontend. ¡Explora combinándolo con otras APIs como Canvas o SVG!

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial: Uso del atributo "onmousemove" en HTML</title>
    <style>
        .area {
            width: 400px;
            height: 200px;
            border: 2px solid #3498db;
            margin: 20px;
            position: relative;
            overflow: hidden;
        }
        #coordenadas {
            font-size: 18px;
            color: #2c3e50;
            margin: 10px;
        }
        #lienzo {
            background-color: #f0f0f0;
            cursor: crosshair;
        }
        .parallax-layer {
            position: absolute;
            transition: transform 0.1s;
        }
    </style>
</head>
<body>
    <h1>Tutorial del atributo <code>onmousemove</code></h1>

    <!-- Ejemplo 1: Seguimiento de coordenadas -->
    <h2>1. Mostrar coordenadas del mouse</h2>
    <div class="area" onmousemove="actualizarCoordenadas(event)">
        <p>Mueve el mouse aquí</p>
    </div>
    <p id="coordenadas">Coordenadas: (0, 0)</p>

    <!-- Ejemplo 2: Efecto de color dinámico -->
    <h2>2. Generador de color interactivo</h2>
    <div 
        class="area" 
        id="colorBox"
        onmousemove="cambiarColor(event)"
    ></div>

    <!-- Ejemplo 3: Dibujo en canvas -->
    <h2>3. Lienzo para dibujar</h2>
    <canvas 
        id="lienzo" 
        width="400" 
        height="200"
        onmousedown="iniciarDibujo(event)"
        onmousemove="dibujar(event)"
        onmouseup="detenerDibujo()"
        onmouseleave="detenerDibujo()"
    ></canvas>

    <!-- Ejemplo 4: Efecto parallax -->
    <h2>4. Efecto parallax con movimiento</h2>
    <div class="area" id="parallaxContainer">
        <div class="parallax-layer" style="left: 50px; top: 50px;">????</div>
        <div class="parallax-layer" style="left: 100px; top: 100px;">⛰️</div>
    </div>

    <script>
        // Ejemplo 1: Coordenadas del mouse
        function actualizarCoordenadas(e) {
            const x = e.clientX - e.target.offsetLeft;
            const y = e.clientY - e.target.offsetTop;
            document.getElementById("coordenadas").textContent = 
                `Coordenadas: (${x}, ${y})`;
        }

        // Ejemplo 2: Cambio de color
        function cambiarColor(e) {
            const caja = document.getElementById("colorBox");
            const x = e.offsetX / caja.offsetWidth * 100;
            const y = e.offsetY / caja.offsetHeight * 100;
            caja.style.background = 
                `linear-gradient(${x}deg, hsl(${x * 3.6}, 70%, 50%), hsl(${y * 3.6}, 70%, 30%)`;
        }

        // Ejemplo 3: Dibujo en canvas
        const lienzo = document.getElementById("lienzo");
        const ctx = lienzo.getContext("2d");
        let dibujando = false;

        function iniciarDibujo(e) {
            dibujando = true;
            ctx.beginPath();
            ctx.moveTo(e.offsetX, e.offsetY);
        }

        function dibujar(e) {
            if (!dibujando) return;
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.strokeStyle = "#e74c3c";
            ctx.lineWidth = 3;
            ctx.stroke();
        }

        function detenerDibujo() {
            dibujando = false;
        }

        // Ejemplo 4: Parallax
        document.getElementById("parallaxContainer").onmousemove = (e) => {
            const capas = document.querySelectorAll(".parallax-layer");
            const rect = e.target.getBoundingClientRect();
            const x = (e.clientX - rect.left) / rect.width * 10;
            const y = (e.clientY - rect.top) / rect.height * 10;

            capas.forEach((capa, index) => {
                const factor = (index + 1) * 0.5;
                capa.style.transform = `translate(${x * factor}px, ${y * factor}px)`;
            });
        };
    </script>
</body>
</html>

<!-- Ejemplo Final: Reloj analógico interactivo -->
<div id="reloj" onmousemove="moverManecillas(event)">
    <div id="manecillaHora"></div>
    <div id="manecillaMinuto"></div>
</div>

<script>
function moverManecillas(e) {
    const centroX = 100, centroY = 100;
    const angulo = Math.atan2(e.offsetY - centroY, e.offsetX - centroX);
    manecillaHora.style.transform = `rotate(${angulo}rad)`;
}
</script>