Effet de trainée derrière le curseur en Jquery

Récemment un de mes clients à voulu que je donne un effet de trainée derrière le curseur sur son site web. Pour cet effet de trainée derrière le curseur, on commence par inclure jQuery :

[sourcecode language= »html »]<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
[/sourcecode]

On va ensuite créer un fichier que l’on appellera trainee.js et qu’on inclue dans notre page web :

[sourcecode language= »html »]<script src="js/trainee.js" type="text/javascript"></script>[/sourcecode]

Pour le contenu de notre script de trainée derrière le curseur on va récupérer les coordonnées de la souris et faire apparaitre, au mouvement de la souris, une image puis la faire disparaitre progressivement ce qui donnera un effet de longue traine :

[sourcecode language= »js »]
$(document).ready(function() {
$(document).mousemove(function(e) {
//Notre image
image = $(‘image.png’).attr({‘src’:’trainee.png’});
//on la fait apparaitre
$(document.body).append(image);
//puis on l’affiche à l’évènement & disparition
image.css({ ‘position’:’absolute’,
top: e.pageY +2 ,
left: e.pageX +2
}).fadeOut(700);
});
});
[/sourcecode]

Voici une démo de ce petit script sur le site d’hypernuit désign.

Sachez aussi que vous pouvez très simplement modifier l’apparence de votre curseur avec CSS:

[sourcecode language= »css »]
cursor: url(‘./images/cursor.png’), default;
[/sourcecode]