Mouse follow harmonieux

**labarre2002** · 23/04/2024, 17h20

Bonsoir

Je réalise une page sur laquelle un cercle suit la souris

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<body>
 
<h1>Cassoulet &nbsp; Riz blanc</h1>
 
<div class="mouse"></div>
 
 
</body>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
h1{
    font-size: 2em;
    display: block;
}
 
.mouse{
    width: 15px;
    height: 15px;
    background-color: rgb(214, 213, 213);
     border-radius:15px ;
     position: absolute;
     transform: translate(-50%,-50%);
     mix-blend-mode: difference;
     pointer-events: none;
     transition: .3s;
}

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 const souris=document.querySelector('.mouse');
    const title=document.querySelector('h1');
    console.log(title);
 
    window.addEventListener('mousemove',(e)=>{
        console.log(e.target);
        souris.style.left=e.pageX  + "px";
        souris.style.top=e.pageY  + "px";
 
    })
 
    title.addEventListener('mouseenter',()=>{
        souris.style.transform="scale(5.9)";
    })
    title.addEventListener('mouseout',()=>{
        souris.style.transform="none";
    })

Le soucis est qu'il a un écart entre le curseur et le rond pour être plus explicite quand je déplace le curseur sur la page il y a environ 5cm entre le curseur et le cercle .
Puis je avoir des pistes pour améliorer cet effet SVP ?

Merci.

**melka one** · 23/04/2024, 20h05

jour

dans le css tu un transition a 3 seconde c'est ca qui bloque met a la place

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  transition: transform .3s;

et pour un centrage du cercle par rapport a la sourie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
souris.style.left=e.pageX - souris.offsetWidth/2 + "px";
        souris.style.top=e.pageY - souris.offsetHeight/2 + "px";

**labarre2002** · 23/04/2024, 21h33

Merci pour ton méssage

Mouse follow harmonieux

JavaScript

Discussions similaires

Partager

Partager