3

Com Posso fazer uma Imagem "Voar" ou "Correr" Sozinha pelo meu site? Eu Gostara de Colocar no meu site uma espécie de "Puzzle", um Mistério. Vou querer colocar um link na Imagem. Tem que Ser um pouco rápido para clicar.

Sabem o Passarinho do Twitter que voa pelo Blog? Eu queria um daquele, só que com a minha imagem, com um Link, se for possível, Obrigado.

4
  • 1
    Passarinho do Twitter que voa pelo Blog?! Hã? Está se referindo a algum blog em específico? Se sim, coloque um link aí para ficar mais claro o que você está tentando explicar. 8/05/2015 às 4:53
  • 1
    Bem vindo ao Stack Overflow português, faça o Tour e veja Como perguntar. A sua pergunta está muito ampla, adicione mais detalhes, por favor. 8/05/2015 às 11:34
  • 1
    Você pode criar animações usando a função animate() do jQuery 8/05/2015 às 11:35
  • Não. É Um Famoso passarinho que voa Pelo Blog que muitos usam. O Fernando já Respondeu á minha pergunta, e eu consegui. Obrigado pelo interesse :) 8/05/2015 às 14:57

1 Resposta 1

7

Olha esse exemplo adaptado desse (agora já com o pássaro do twitter)(Comentado, nos pontos de possíveis alterações):

$(document).ready(function() {
  // inicializa animação
  animateBird();
});

function makeNewPosition() {
  // Get viewport dimensions (remove the dimension of the div)
  var h = $(window).height() - $('.birdFloat').height();
  var w = $(window).width() - $('.birdFloat').width();

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];
}

function animateBird() {
  var newq = makeNewPosition();
  var oldq = $('.birdFloat').offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

  $('.birdFloat').animate({
    top: newq[0],
    left: newq[1]
  }, speed, function() {
    animateBird();
  });
};

function calcSpeed(prev, next) {
  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);

  var greatest = x > y ? x : y;

  // modifique esse valor para modificar a velocidade da animação 
  var speedModifier = 0.1;
  var speed = Math.ceil(greatest / speedModifier);

  return speed;
}
a.birdFloat {
  /* Altere o background-image para trocar a imagem, e também edite o height e o width conforme tamanho da imagem */
  width: 44px;
  height: 44px;
  background-image: url(https://wiki.teamfortress.com/w/images/thumb/5/53/Twitter_bird_mini_icon.png/44px-Twitter_bird_mini_icon.png?t=20111215203312);
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Para indicar um link use a tag a, e adicione o link no atributo href -->
<a href="https://www.google.com" class='birdFloat'></a>

Exemplo também no jsFiddle.

Fonte: Esta resposta do SOen.

1
  • Obrigado! Resolveu o Meu Problema. 8/05/2015 às 14:55

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