Récupérer la position de la souris

Avertissement

À priori que pour une fenêtre de navigateur format paysage, à mettre à jour pour le format vertical

Avertissement

Ce code doit être couplé avec une expression pour donner quelque chose !

var conteneur = document.getElementById('conteneur_animation');

var anim_exemple_simple = bodymovin.loadAnimation({
  container: conteneur, // conteneur, obligatoire
  path: 'data.json', // fichier de données, obligatoire
  renderer: 'svg', // requis, moteur de rendu parmi 'svg','canvas','html'
  loop: true, // optionnel
  autoplay: true, // optionnel
  name: 'exemple-simple', // optionnel, permet de sélectionner l'animation par la suite dans certains cas (mettre un nom unique !)
})


var groupe; // on y mettra la référence du premier élément groupe du SVG
var ratio; // largeur/hauteur de la compo after
var position_souris = [0,0]; // position de la souris, par défaut 0,0

// dès que l'animation est chargée dans le DOM
anim_exemple_simple.addEventListener("DOMLoaded", function(){

   // on récupère la référence du groupe
   groupe = document.querySelector('g');

   // on récupère les infos sur la compo after
   ratio = [parseInt(document.querySelector("rect").getAttribute('width')),parseInt(document.querySelector("rect").getAttribute('height'))];

   // on ajoute un écouteur d'événement sur le survol du groupe
   // qui met à jour la variable relative à la position de la souris
   groupe.addEventListener('mousemove', modifier_position_souris )
})

function modifier_position_souris ( evenement ) {
   /* calcul de la nouvelle position de la souris */
   position_souris = [evenement.clientX, evenement.clientY - calcul_offset() ];
}

function calcul_hauteur () {
   /* calcul de la hauteur de l'animation, ne marche qu'en mode paysage probablement */
   var largeur = document.querySelector('svg').clientWidth;
   var hauteur = largeur * ( ratio[1] / ratio[0] );
   return hauteur;
}

function calcul_offset () {
   /* calcul le décalage entre le haut de l'animation et le bord supérieur de la vue */
   return (document.body.offsetHeight - calcul_hauteur()) / 2;
}