onmousemove="positionCurseur(event);"
Animation avec le curseur de la souris

Présentation

Dans ce cours, vous l'aurez compris, un peu d'originalité. En effet je vais vous apprendre à récupérer la position du curseur et créer une animation en fonction de la position de ce curseur.

Cliquez sur "Lumos Maxima" pour revenir en mode normal et voir le tutoriel ;)

Ici, je remplace le curseur par un bloc qui permet d'afficher le texte de la page.

La fonction Javascript

Avant toute chose, j'utilise JQuery pour réaliser l'animation. Les coordonnées du curseur sont récupérées grâce à une fonction Javascript.
Le bloc faisant office de "lumière" a des coordonnées affectées en fonction de la position de ce curseur.

function positionCurseur(event) {
    var bloc = document.getElementById("lumos");
    var posX;
    var posY;
    posX = event.clientX;
    posY = event.clientY;
    var posLumosX = posX-75;
    var posLumosY = posY-75;
    bloc.style.left = posLumosX+"px";
    bloc.style.top = posLumosY+"px";
}

Ensuite, il faut appeler cette fonction à chaque mouvement de la souris, cela se fait dans la balise <body> de cette façon :

<body onmousemove="positionCurseur(event);">

Si vous êtes sous Symfony, vous pouvez créer un block twig dans la balise <body>.

Activer l'animation au clic

Prévoyez un lien ou un bouton permettant d'activer l'animation. Ici j'ai un lien
<a id="actionLumos" href="#">Lumos Maxima</a> (celui en haut de la page en noir).
Lors du clic sur celui-ci, une fonction Javascript est déclenchée. La voici :

$('#actionLumos').on('click', function () {
    $('body').css('background-color', '#fff');
    $('body').css('cursor', 'default');
    $('.cours').css('background-color', '#fff');
    $('h2').css("cssText", "color: #1BA5E1 !important; border-bottom-color: #1BA5E1 !important;");
    $('#actionLumos').remove();
    $('#lumosMaxima').show();
});

Le bloc simulant la lumière blanche

Ce n'est qu'un simple bloc, je joue avec l'attribut z-index pour faire un effet de survol. Créez donc une <div> comme ci-dessous :

<div id="lumos"></div>
Ajoutez ensuite du CSS à ce bloc :
#lumos
{
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #fff;
    display: block;
    z-index: 1;
}

Le texte de ce cours (celui que je veux voir apparaître dans l'animation) a les propriétés CSS suivantes :

#contenuLumos
{
    position: relative;
    z-index: 2;
}

Au début de mon code, j'ai utilisé une balise <style> pour surcharger le CSS par défaut et faire en sorte que tout soit noir.

Place à l'amusement

Vous pouvez désormais utiliser cet effet assez sympathique :)

Mentions légales
Copyright © LEFEVRE Gaëtan