Mise à l'échelle du texte relatif à la position dans la fenêtre du navigateur.

Question

Je suis actuellement coincé sur un peu de maths pour mon projet. J'essaie de mettre à l'échelle une div sur ma page en fonction de sa proximité avec le centre de la fenêtre du navigateur, donc quand elle est au centre de la fenêtre, elle est pleine taille, mais lorsque vous faites défiler vers le haut ou vers le bas, elle diminue comme pour disparaître. Je me bats juste sur la façon de calculer cette valeur. Nous avons avancé, Harry.

Answer 1

nous x et y être la position de votre div par rapport à la fenêtre du navigateur

window.innerHeight et window.innerWidth vous donnera la hauteur de la fenêtre visible actuelle et la largeur.

var w = window.innerWidth; 
var h = window.innerHeight; 

Le centre serait

var center = (w/2, h/2);

la distance du centre est:

var distance = Math.sqrt((w/2 - x)*(w/2 - x), (h/2 - y)*(h/2 - y));

Maintenant, vous voulez à l'échelle de la div afin que sa taille maximale lorsque sa distance du centre est 0 et plus petit quand il est plus loin.

La chose la plus simple à faire est d'utiliser une largeur de w - distance et une hauteur de h - distance. Cela vous donnera une échelle linéaire, vous pouvez également utiliser d'autres fonctions de mise à l'échelle, mais je vous laisse le soin de jouer avec pour l'instant. :)