Image “run / fly” through the Site

Posted on

Question :

Can I make a “Fly” or “Run” Image Alone on my site?
I would like to put on my site a kind of “Puzzle”, a Mystery.
I want to put a link in the Image. It has to be a little quick to click.

Do you know the Twitter Bird that flies through the Blog?
I wanted one of that, only with my image, with a Link, if possible,
Thank you.


Answer :

Look at this tailored example this (now with the twitter bird) (Reviewed, in points of possible changes) :

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

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.left], newq);

    top: newq[0],
    left: newq[1]
  }, speed, function() {

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(;
  position: fixed;
<script src=""></script><!--Paraindicarumlinkuseataga,eadicioneolinknoatributohref--><ahref="" class='birdFloat'></a>

Example also in jsFiddle.

Source: This answer from SOen .


Leave a Reply

Your email address will not be published. Required fields are marked *