over - Elementos giratorios según la posición del cursor con jQuery

rotate css animation

Question

Lo que intento hacer es un script jQuery que rote los elementos dentro de un div, dependiendo de la posición del cursor en la ventana del navegador.

La proporción es algo así como:

maximum_pixels_x-axys: 2 ° = center_pixels_x-axys: 0 °

y lo mismo para el eje y

Si el cursor está en el centro de la pantalla, no hay rotación. Si está en otro lugar, debe girarse de 0 ° a 2 ° (o valores negativos según la posición de la pantalla en un plano cartesiano relativo). Entonces es una rotación dinámica con retroalimentación inmediata.

Como lo que ves aquí: http://css3playground.com/flashlight.php (selecciona del menú "Bisel") pero usando la transform:rotate lugar de text-shadow de text-shadow .

Ahora probé con transit.js, usando sen e cos en lugar de grado (resultará "grado" de 0 a 1). No es la forma correcta, lo sé, pero es el método más cercano que imaginé para obtener un valor bajo para los grados.

var max_x = $(window).width();
var max_y = $(window).height();
var center_x = (max_x/2);
var center_y = (max_y/2);

$(document).mousemove(function(e) {
    var mouse_x = e.pageX,
    mouse_y = e.pageY,
    hypotenuse = Math.sqrt(Math.pow((mouse_x-center_x),2)+Math.pow((mouse_y-center_y), 2)),
    cos = (mouse_x-center_x)/hypotenuse,
    sin = (mouse_y-center_y)/hypotenuse;
    $(''#div1, #div2'').transition({ perspective: ''400px'', rotateX: sin, rotateY: cos });
});

Pero los resultados no son los que esperaba. Los divs giran (de la manera incorrecta, pero giran), pero no dinámicamente.

¿Qué debo hacer?

Fiddle: http://jsfiddle.net/lucgenti/LtWtW/11/

Answer 1

Después de un poco de trabajo por parte de los dos, aquí hay una nueva versión que no usa un plugin y está libre de prefijos. NOTA: Esto solo funciona en navegadores que admiten transformaciones CSS

Aquí está el jQuery que solía lograr tal comportamiento

$(document).ready(function () {
    var $one = $(''#div1''),
        $two = $(''#div2''),
        browserPrefix = "",
        usrAg = navigator.userAgent;
    if(usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) {
        browserPrefix = "-webkit-";
    } else if (usrAg.indexOf("Opera") > -1) {
        browserPrefix = "-o";
    } else if (usrAg.indexOf("Firefox") > -1) {
        browserPrefix = "-moz-";
    } else if (usrAg.indexOf("MSIE") > -1) {
        browserPrefix = "-ms-";
    }

    $(document).mousemove(function (event) {
        var cx = Math.ceil(window.innerWidth / 2.0),
            cy = Math.ceil(window.innerHeight / 2.0),
            dx = event.pageX - cx,
            dy = event.pageY - cy,
            tiltx = (dy / cy),
            tilty = - (dx / cx),
            radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)),
            degree = (radius * 15);

            shadx = degree*tiltx;   /*horizontal shadow*/
            shady = degree*tilty;   /*vertical shadow*/

        $one.css(browserPrefix + ''transform'', ''rotate3d('' + tiltx + '', '' + tilty + '', 0, '' + degree + ''deg)'');
        $two.css(browserPrefix + ''transform'', ''rotate3d('' + tiltx + '', '' + tilty + '', 0, '' + degree + ''deg)'');

        if(dx>cx) /*without that horizontal values are reversed*/
            $(''#div1, #div2'').css(''box-shadow'', + (-shady) + ''px '' + (-shadx) +''px 5px #3D352A'');
        else $(''#div1, #div2'').css(''box-shadow'', + shady + ''px '' + (-shadx) +''px 5px #3D352A'');
    });
});