IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Mouse follow harmonieux


Sujet :

JavaScript

  1. #1
    Membre habitué Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    234
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 234
    Points : 135
    Points
    135
    Par défaut Mouse follow harmonieux
    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.
    « Je ne perds jamais, soit je gagne, soit j'apprends. »
    Nelson Mandela

  2. #2
    Membre expérimenté
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 718
    Points : 1 604
    Points
    1 604
    Par défaut
    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";
    Plus vite encore plus vite toujours plus vite.

  3. #3
    Membre habitué Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    234
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 234
    Points : 135
    Points
    135
    Par défaut
    Merci pour ton méssage
    « Je ne perds jamais, soit je gagne, soit j'apprends. »
    Nelson Mandela

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Messages de la Mouse Wheel
    Par cjacquel dans le forum MFC
    Réponses: 1
    Dernier message: 12/04/2005, 09h30
  2. Bouton inactif et mouse event
    Par poulette dans le forum MFC
    Réponses: 2
    Dernier message: 03/02/2005, 14h18
  3. pb capture mouse client
    Par latisane dans le forum MFC
    Réponses: 11
    Dernier message: 19/01/2005, 18h02
  4. [Scrolling] Mouse Wheel avec plusieurs DBGrid
    Par portu dans le forum Composants VCL
    Réponses: 4
    Dernier message: 06/08/2004, 17h30
  5. mouse.cursorpos.y différent de ce que j'attends
    Par Guigui_ dans le forum Composants VCL
    Réponses: 3
    Dernier message: 28/11/2002, 21h52

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo