создание собственного эффекта параллакса Jquery - PullRequest
Новая
       10

создание собственного эффекта параллакса Jquery

1 голос
/ 07 декабря 2011

Я создаю эффект параллакса jquery, при котором, когда пользователь впервые наводит указатель мыши на документ, слой переднего плана будет перемещаться в направлении курсора мыши, так что курсор мыши будет находиться над центром слоя переднего плана.После этого, когда пользователь перемещает курсор мыши, слой переднего плана должен перемещаться в противоположном направлении от курсора мыши;фоновый слой также будет двигаться в противоположном направлении, но медленнее, чтобы создать эффект параллакса.

Проблема заключается в том, что после того, как слой переднего плана перемещается в направлении курсора мыши с помощью события mouseover, и я запускаю событие mousemove, слои переднего плана и фона "прыгают" в другое место.

jsfiddle

1 Ответ

2 голосов
/ 07 декабря 2011

Я обновил ваш пример и похоже, что теперь он работает нормально (по крайней мере, в Google Chrome 15 и IE9).

http://jsfiddle.net/jPFAq/10/

В основном я изменил mouseover на mouseenter и произвел расчет координат в mouseenter так же, как в mousemove.

UPDATE:
Кроме того, я исключил использование переменной и просто отписался от события mousemove (jQuery.unbind), пока выполняется обработчик mouseenter.

Вот код для справки: 

function onmousemovehandler(e){    
    mouse_dx = -(e.pageX);
    mouse_dy = -(e.pageY);
    $('#foreg').css({

        'left': mouse_dx,
        'top': mouse_dy
    });

    mouse_dx = (mouse_dx) / 2;
    mouse_dy = (mouse_dy) / 2;

    $('#backg').css({

        'left': mouse_dx,
        'top': mouse_dy

    });
};

$(document).mouseenter(function(e) {
            $(document).unbind('mousemove', onmousemovehandler);

  mouse_x = -(e.pageX);
  mouse_y = -(e.pageY);

  $('#foreg').animate({
         'left': mouse_x,
         'top': mouse_y
     }, 
     300);
  $('#backg').animate({
         'left': mouse_x/2,
         'top': mouse_y/2
     }, 
     300, 
     function() {           
         $(document).mousemove(onmousemovehandler);
        });
});
...