0

Bom, antes de mais peço desculpa, mas esta pergunta é um bocado dificil de me expressar.

O que pretendo saber é se existe algum código em javascript que faça mexer o background-position muito rápido, até muito devagar e depois parar. Ou seja supomos que a animação demora 10 segundos. Inicialmente ele mexe muito rápido e vai abrandando até chegar ao 0 segundo e parar definitivamente.

Não sei se me fiz expressar muito bem, mas pretendo fazer isto com javascript ou jquery.

Meu Código:

<html>
<head>
<style>

body,html,div {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  position:relative;
}

#anim {
  background:url('https://www.gravatar.com/avatar/7a2c254d9e863db31614b95e909a9633?s=800&d=identicon') no-repeat 0 0;
  background-size:180% 180%;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">
</head>
<body>

<script type="text/javascript">
$('#anim').animate({'background-position-x': '100%'},8000,'easeOutCubic');
</script>
<div id="anim">

</div>

</body>
</html>

O movimento seria a imagem da esquerda para a direita.

Não pretendo utilizar a animate do css, mas sim utilizar apenas javascript.

Obrigado.

0

2 Respostas 2

2

Com jQuery fica simples:

$('#anim').animate({'background-position-x': '100%'},8000,'easeOutCubic');
body,html,div {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  position:relative;
}

#anim {
  background:url('https://www.gravatar.com/avatar/7a2c254d9e863db31614b95e909a9633?s=800&d=identicon') no-repeat 0 0;
  background-size:300% 300%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="anim"></div>

A velocidade é o segundo parâmetro, e desaceleração pode ser alterada no easing, que é um plugin do jQuery.

15
  • Onde está esse easing no codigo?
    – Gonçalo
    Commented 17/04/2016 às 21:05
  • acrescentei uma explicação, e o endereço. Teste de novo no "executar", dei uma atualizada. Aumentei para 8 segundos (8000)
    – Largato
    Commented 17/04/2016 às 21:06
  • Aqui no stackoverflow está a funcionar exatamente como eu quero, porem eu tentei criar o arquivo e não está a funcionar. Adicionei o código a minha pergunta, pode-me informar o que fiz de errado? O efeito não funciona.
    – Gonçalo
    Commented 17/04/2016 às 21:14
  • O que aconteceu quando vc testou no seu código? Nao apareceu, não animou, ou o que?
    – Largato
    Commented 17/04/2016 às 21:15
  • Apareceu somente a imagem, mas sem efeito.
    – Gonçalo
    Commented 17/04/2016 às 21:16
0

Não sei se a melhor maneira de "mover" uma imagem de fundo, seja modificar constantemente a posição do "background". Porem, se isso resolve seu problema, tem ai um exemplo:

CSS:

body{
    background-image: url('http://www.w3schools.com/cssref/smiley.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 1px 1px;
}

HTML:

<body></body>

JavaScript:

var x = 0;
var y = 0;
var delay = 10;

var t = setTimeout( act , delay );

function act(){

    delay +=1;
    x++;
    y++;
    $('body').css('background-position',x+'px '+y+'px');

    clearInterval(t);
    t = setTimeout( act , delay );
}

Incluir:

<script src="https://code.jquery.com/jquery-2.2.3.min.js" ></script>

Repare que o "delay" no intervalo é sempre incremento, isso para dar a impressão de que imagem está perdendo velocidade, como você pediu. Para deixar o movimento constate, se quer verificar o quão rápido o background pode ser movido, comenta a linha:

 //delay +=1;
3
  • Boa tarde, é basicamente isso, contudo tem como o efeito parar? definitivamente.
    – Gonçalo
    Commented 17/04/2016 às 20:53
  • Sim, mas é preciso definir "quando". Basta em determinado momento não "agendar" o evento novamente, colocando uma verificação para checar se o critério de parada não foi atingido. if (!criterio){ t = setTimeout( act , delay ); }
    – mau humor
    Commented 17/04/2016 às 20:55
  • Por exemplo, é possivel deixar a animação durante os 10 segundos, com a sensação que ta perdendo velocidade e ao segundo 0 parar completamente?
    – Gonçalo
    Commented 17/04/2016 às 21:02

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 .