Le curseur personnalisé

Grand classique du webdesign moderne, le remplacement du curseur classique représentant une petite flèche, par un élément beaucoup plus graphique, un curseur personnalisé.
Les agences web et les sites très stylisés utilise ce procédé en intégrant le curseur par défaut dans l’univers du site.
La méthode est simple et ne demande que quelques lignes de CSS et JavaScript à la portée de tous.

Comment personnaliser un curseur sur un site web ?

Pour faire au plus simple, nous pouvons simplement utiliser une commande CSS cursor : url(« monimage.png »).
Mais comme vous avez remarqué sur certain site ce qui donne le petit plus de ce genre de curseur personnalisé, c’est de pouvoir l’animer.
Le secret, c’est de désactiver le curseur, le rendre invisible, grâce au CSS et de venir coller une div sur le curseur invisible.
Quand vous voyez sur un site un curseur personnalisé, en réalité, c’est une div qui suis un curseur invisible.
C’est grâce au JavaScript que nous allons traquer le mouvement de la souris et calqué ce déplacement avec le celui de la div représentant le curseur personnalisé.

Dans la pratique

Dans la première étape, il nous suffit de créer une <div class= »curseur> vide qui va être notre curseur.
En CSS nous allons indiquer que c’est une div en « absolute » pour pouvoir la bouger sur tout l’écran, il faut donc de ce fait lui donner une taille. Et donc il est temps de cacher le curseur par défaut en CSS avec la commande « cursor: none ».

body{
cursor: none;
}
.curseur{
   position: absolute;
   width:75px;
   height:75px;
   background:red;
}

Pour la partie JavaScript nous avons un petit calcul à faire. Avant de connaitre la position du curseur, il faut savoir que c’est le point en haut à gauche la référence du centre, par exemple sur notre curseur de 75 px en X et 75 px en Y, le centre pour lui se trouve a X=0 et Y=0.
Après avoir sélectionné la <div>nous allons venir rechercher les valeurs CSS pour connaitre la taille du curseur la diviser par 2 pour obtenir le centre.

var curseur = document.getElementById('curseur');
 var centreYcurseur = parseInt(getComputedStyle(curseur, null).height) / 2;
 var centreXcurseur = parseInt(getComputedStyle(curseur, null).width) / 2;

Ensuite nous pouvons traquer la position du curseur invisible par rapport au document et appliquer les valeurs X et Y a notre <div> curseur personnalisé.

window.addEventListener('mousemove', e => {
   curseur.style.left = e.pageX - centreXcurseur + "px"
     curseur.style.top = e.pageY - centreYcurseur + "px"
 })

On règle les bugs

En effet, certaine question peuvent alors se poser. Comment fait-on pour cliquer sur un lien avec une div en absolute diriger en JavaScript.
En CSS tout simplement il vous faudra mentionner la propriété « pointer-events: none; » pour laisser le comportement des liens au passage de votre curseur personnalisé.
Oui, mais lorsqu’on fait ça un curseur par défaut en passant sur le lien, donc n’oublié pas de mettre votre <a> en CSS de répéter la commande CSS « cursor: none ».

Améliorations et animations

Pour l’exemple nous avions remplacé le curseur par un grand carré rouge, mais vous pouvez clairement faire ce que vous voulez en CSS même ajouter du pseudo-élément, du box-shadow.
Vous pouvez aussi l’animer grâce au @keyframes.

Beaucoup de chose peuvent être maintenant ajouté en JavaScript au niveau des comportements lorsqu’on passe sur un élément cliquable par exemple, l’animer aux clics, libre à vous depuis cette base de créer votre curseur personnalisé.