2

Meu objetivo é essa animação aqui:

http://www.pullabulla.com.br/

Os terrenos acompanhando o mouse...

O que fiz até agora?

css

  #box, body {
      overflow: hidden;
  }

  #box {
    position: relative;
  }

  #img{
    position:absolute;
 }

Js

$(document).ready(function() {

     $('body').mousemove(function(e){
        $("#img").css({left:e.pageX-120});
     });

});

html

<div id="box" style="width: 1000px; height: 180px;">
  <img id="img" src="bg-clouds.png"/>
</div>

Resultado?

http://www.dinamicaimoveis.com.br/novo/an/cn.php

O que está faltando?

1
  • você deve fazer uma verificação dos limites, caso o left da imagem por exemplo ultrapasse um certo valor você não atualiza a posição Commented 2/05/2016 às 13:17

1 Resposta 1

2

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.

5
  • Resolveu o problema. Mas o efeito esta indo muito rápido. Tem como fazer um slow motion? Para rolar mais suave? Commented 2/05/2016 às 15:23
  • recomendo antes de codificar estruturar bem as idéias, como deve funcionar tudo, assim fica mais fácil codificar e resolver problemas chatos de funcionalidade Commented 2/05/2016 às 15:31
  • Sim, é exatamente isso que eu preciso, apenas controlar a velocidade de deslocamento agpra. Commented 2/05/2016 às 15:34
  • Muito obrigado. Commented 2/05/2016 às 15:40
  • só pra deixar claro que movement não é realmente a quantidade de movimento, é na verdade o left da sua imagem Commented 2/05/2016 às 18:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .