JS - dot na kursor

Kontynuujemy poprzedni przykład, zrobimy sobie małą kropkę, która podąża za kursorem myszy, gdziekolwiek go nie przesuniemy. Do dzieła.

Ok, modyfikujemy nieznacznie markup:

<body>
    <div id="drawme"></div>
    <div id="dot"></div>
    
    <script type="module" src="./main.js"></script>
</body>

Modyfikujemy style, już nie div tylko po id, plus dodajemy style dla kropki:

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


#drawme {
    width: 1200px;
    height: 600px;
    background-color: teal;
}

#dot {
    
        position: absolute;
        background-color: pink;
        border-radius: 50%;
        opacity: 0.6;
        pointer-events: none;
        left: -20px;
        top: -20px;
        width: 40px;
        height: 40px;
      
}

Modyfikujemy main.js, zbieramy po id i diva i kropkę:

import { drawCircle, drawLine } from "./drawing.js";

let isPressed = false;
let x;
let y;

let div = document.querySelector("#drawme");
let dot = document.querySelector("#dot");

Ok, dodajmy do window pointer event i niech coś wypisuje:


window.addEventListener('pointermove', function(e){
   
    console.log("bla");
    console.log(`x: ${e.clientX}, y: ${e.clientY}`);
   
});

Jak już widzimy, że działa, to dodajemy animację:

window.addEventListener('pointermove', function(e){
    dot.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});

Dlaczego zmieniamy transform, a nie top i left? Bo CSS triggers, bo optymalizacja, bo nie chcemy ruszać layoutu…

JS – dot na kursor