| Este sistema basado en la regla de tres aplicado en matemáticas lo desarrolle hace unas horas para un trabajo que ustedes aun no conocen pero que me he preocupado en dejarles inicios en distintas partes del foro.
Todo empieza a partir del centro de la pagina en donde se asociaran los limites de ancho y alto del área con un rango en pixeles.
El uso que le di a esto fue lograr mover el fondo de la pagina al contrario de la posición del cursor para darle un toque de dinamismo al sitio web.
Algunas personas que lograron ver el código en acción mientras lo desarrollaba fueron Franklin y Kevin. Aquí les dejo la base de todo:
|
var rango = 25;
var x = Math.round((e.pageX*rango/$(document).width())-(rango/2));
var y = Math.round(-(e.pageY*rango/$(document).height())+(rango/2));
Rango vendría siendo el área como tal que queremos desplazar, en nuestro caso serian 25px que es igual a -x=12,5; x=12,5; -y=12,5; y=12,5, pero, como estamos redondeando los números para evitar los decimales con Math.round, serian 12 de cada coordenada en vez de los 12,5 iniciales ¿Me explique con claridad?
El punto 0,0 vendría siendo el centro de la pantalla.
Un ejemplo:
$(document).ready(function(){
$(this).mousemove(function(e){
var rango = 25;
var x = Math.round((e.pageX*rango/$(document).width())-(rango/2));
var y = Math.round(-(e.pageY*rango/$(document).height())+(rango/2));
$('body').html('X = ' + x + ' | Y = ' + y);
});
});
Saludos.