Effet de trainée derrière le curseur

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 :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

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

<script src="js/trainee.js" type="text/javascript"></script>

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 :

$(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);
});
});

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:

cursor: url('./images/cursor.png'), default;

matthieu

Ingénieur d'affaires dans une société de conseil en technologies. Passionné par le numérique et le business qu'il génère. Également entrepreneur et formateur à mes heures perdues.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles similaires

Web

Smart App Banner, promouvoir une app iOS sur le web

Très récemment, Apple a mi à disposition un outil permettant aux webmasters/développeurs d’applications iOS de mettre en avant leur travail. En effet, en ajoutant simplement une balise meta dans le header d’une page web, on peut Lire la suite…

Web

Lister les commentaires Facebook rattachés à une url grâce à Open Graph

Pour utiliser le système de commentaires de Facebook, vous avez le choix. Vous pouvez utiliser le système d’iFrame que propose Facebook cependant si vous vous intéréssez un peu au référencement naturel vous savez sans doutes Lire la suite…

Web

Afficher votre score Klout sur WordPress

Si vous vous intéréssez un peu à l’actualité du Web et plus particulièrement à celle des réseaux sociaux, vous avez du entendre parler de Klout. Si ce n’est pas le cas et bien c’est très simple. Klout est Lire la suite…