1

我创建了这个很棒的徽标动画，它改变了 css 透视图，使徽标看起来朝向鼠标光标。这可以出色而流畅地工作，但是在浏览器窗口内移动鼠标几秒钟后，动画变得生涩，特别是在 Firefox 中，但在一段时间后在 Safari 中也是如此。

我无法弄清楚为什么会发生这种情况，但它几乎就像某处有韭菜一样。

我任何人都有任何想法，那么我会非常感激。非常感谢！

jsFiddle

    jQuery(document).ready(function(){
jQuery(document).ready(function(){
// Detect browser width
$(document).ready(function(){
    current_width = $(window).width();
    current_height = $(window).height();
    });

// Update browser width if it changes
$(window).resize(function(){
    current_width = $(window).width();
    current_height = $(window).height();
    });

// Change perspective CSS based on mouse position
$(window).mouseenter(function() {
   $(document).mousemove(function(e){

        // Variables that control the extent of the affect of the CSS.
        // Logo
        var logoRotateY = 12;
            logoRotateX = 12;
        // Background 1
            bg1RotateY = 10;
            bg1RotateX = 10;
            bg1RotateR = 100;
            bg1RotateT = 100;
        // Background 2
            bg2RotateY = 8;
            bg2RotateX = 8;
            bg2RotateR = 80;
            bg2RotateT = 80;
        // Background 3
            bg3RotateY = 6;
            bg3RotateX = 6;
            bg3RotateR = 60;
            bg3RotateT = 60;

       // Specify items within an array called kits. Then create an object with curly brackets around (to specify css)
       var  kits = ['-webkit-transform','-moz-transform','-ms-transform','transform'],
            obj = {};
            // The following variables are specified here and called later on (to save typing multiple times).
            pagex = (e.pageX-(current_width/2))/1000,
            pagey = (e.pageY-(e.pageY*2-600)-(current_height/2)) /1000;

        // Also zero the transition when mouseenters to prevent jerky animation. This is called later on.
        var zerostyles = {'-webkit-transition': "-webkit-transform 0s linear 0s",
        'transition': "transform,-ms-transform,-moz-transform 0s linear 0s"};

        // Now we are spcifying the left and right attributes for the background images. These are controlled by the variables above
        var bg1right = {'right': + pagex * bg1RotateR + "px"};
        var bg1top = {'top': + pagey * bg1RotateT + "px"};
        var bg2right = {'right': + pagex * bg2RotateR + "px"};
        var bg2top = {'top': + pagey * bg2RotateT + "px"};
        var bg3right = {'right': + pagex * bg3RotateR + "px"};
        var bg3top = {'top': + pagey * bg3RotateT + "px"};

       // The main logo. Here we are saying "for each value in the array 'kits' loop round.
       $.each(kits, function(k,val) {
                obj[val] = "rotateY(" + pagex * logoRotateY + "deg) rotateX(" + pagey * logoRotateX + "deg)";
            });

            // Now we have got the looping information in an object called obj we can put it in the css for #logo
            $('#logo').css(obj);
            $('#logo').css(zerostyles);


       // Next is the first background image. Same thing again.
       $.each(kits, function(k,val) {
                obj[val] =  "rotateY(" + pagex * bg1RotateY + "deg) rotateX(" + pagey * bg1RotateX + "deg)"
            });
            $('#logo-bg-1').css(obj);
            $('#logo-bg-1').css(zerostyles);
            $('#logo-bg-1').css(bg1right);
            $('#logo-bg-1').css(bg1top);



        // Next is the second background image. Same thing again.
       $.each(kits, function(k,val) {
                obj[val] = "rotateY(" + pagex * bg2RotateY + "deg) rotateX(" + pagey * bg2RotateX + "deg)";
            });
            $('#logo-bg-2').css(obj);
            $('#logo-bg-2').css(zerostyles);
            $('#logo-bg-2').css(bg2right);
            $('#logo-bg-2').css(bg2top);


        // Next is the third background image. Same thing again.
       $.each(kits, function(k,val) {
                obj[val] = "rotateY(" + pagex * bg3RotateY + "deg) rotateX(" + pagey * bg3RotateX + "deg)";
            });
            $('#logo-bg-3').css(obj);
            $('#logo-bg-3').css(zerostyles);
            $('#logo-bg-3').css(bg3right);
            $('#logo-bg-3').css(bg3top);


// This section zeros the css rotation when the mouse leaves the page
   }).mouseleave(function(e) {
    var pageX = e.pageX || e.clientX,
        pageY = e.pageY || e.clientY;

        if (pageX == 0 || pageY == 0) {
            return;
        }


        // This creates a transition when the mouse leaves the page to make it moothly snap back to centre

    $('#logo, #logo-bg-1, #logo-bg-2, #logo-bg-3').css({
        '-webkit-transition': "-webkit-transform 0.2s, right 0.2s, top 0.2s",
        'transition': "transform 0.2s,-ms-transform 0.2s,-moz-transform 0.2s, right 0.2s, top 0.2s",
        '-webkit-transform': "rotateY(0deg) rotateX(0)",
        'transform': "rotateY(0deg) rotateX(0)",
        '-ms-transform': "rotateY(0deg) rotateX(0)",
        '-moz-transform': "rotateY(0deg) rotateX(0)",
        'right': "0",
        'top': "0"
    });

});
});


})
4

0 回答 0