Skip to main content
adicionou 541 caracteres ao conteúdo
Fonte Link

Como eu disse, voce precisa adicionar um teste, eu fiz isso aqui:

$(document).ready(function() {

 $('body').mousemove(function(e){
    var hw = parseInt($("#box").css("width"))/2;
    if(e.pageX - hw < 0)
        $("#img").css({left:e.pageX - hw});
 });

});

e acho que agora está funcionando como voce quer, voce também pode adicionar uma condição pra verificar o limite no lado direito, só que você pode não obter o mesmo efeito neste lado já que sua imagem é muito grande, você pode somar alguns numeros no e.pageX pra "reduzir" o tamanho da imagem, mas esse cálculo depende da sua especificação para a animação.

EDITED

No estado definido acima, a imagem move a mesma quantidade que o mouse, pra mudar isso você deve mudar a quantidade de movimento do mouse, quero dizer, fazer o cálculo como se o mouse não tivesse se movido tanto quanto ele realmente se moveu, e pra isso eu consegui montar isso:

$(document).ready(function() {

 $('body').mousemove(function(e){
    var hw = parseInt($("#box").css("width"))/2;
    var movement = (e.pageX - hw)/8;
    if(movement < 0)
        $("#img").css({left:movement});
 });

});

dividindo a quantidade de movimento pelo numero 8 a animação fica bem mais lenta, você pode variar esse número.

Como eu disse, voce precisa adicionar um teste, eu fiz isso aqui:

$(document).ready(function() {

 $('body').mousemove(function(e){
    var hw = parseInt($("#box").css("width"))/2;
    if(e.pageX - hw < 0)
        $("#img").css({left:e.pageX - hw});
 });

});

e acho que agora está funcionando como voce quer, voce também pode adicionar uma condição pra verificar o limite no lado direito, só que você pode não obter o mesmo efeito neste lado já que sua imagem é muito grande, você pode somar alguns numeros no e.pageX pra "reduzir" o tamanho da imagem, mas esse cálculo depende da sua especificação para a animação.

Como eu disse, voce precisa adicionar um teste, eu fiz isso aqui:

$(document).ready(function() {

 $('body').mousemove(function(e){
    var hw = parseInt($("#box").css("width"))/2;
    if(e.pageX - hw < 0)
        $("#img").css({left:e.pageX - hw});
 });

});

e acho que agora está funcionando como voce quer, voce também pode adicionar uma condição pra verificar o limite no lado direito, só que você pode não obter o mesmo efeito neste lado já que sua imagem é muito grande, você pode somar alguns numeros no e.pageX pra "reduzir" o tamanho da imagem, mas esse cálculo depende da sua especificação para a animação.

EDITED

No estado definido acima, a imagem move a mesma quantidade que o mouse, pra mudar isso você deve mudar a quantidade de movimento do mouse, quero dizer, fazer o cálculo como se o mouse não tivesse se movido tanto quanto ele realmente se moveu, e pra isso eu consegui montar isso:

$(document).ready(function() {

 $('body').mousemove(function(e){
    var hw = parseInt($("#box").css("width"))/2;
    var movement = (e.pageX - hw)/8;
    if(movement < 0)
        $("#img").css({left:movement});
 });

});

dividindo a quantidade de movimento pelo numero 8 a animação fica bem mais lenta, você pode variar esse número.

Fonte Link

Como eu disse, voce precisa adicionar um teste, eu fiz isso aqui:

$(document).ready(function() {

 $('body').mousemove(function(e){
    var hw = parseInt($("#box").css("width"))/2;
    if(e.pageX - hw < 0)
        $("#img").css({left:e.pageX - hw});
 });

});

e acho que agora está funcionando como voce quer, voce também pode adicionar uma condição pra verificar o limite no lado direito, só que você pode não obter o mesmo efeito neste lado já que sua imagem é muito grande, você pode somar alguns numeros no e.pageX pra "reduzir" o tamanho da imagem, mas esse cálculo depende da sua especificação para a animação.