"Run/Fly" Image by Site

Asked

Viewed 302 times

3

How do I make a "Fly" or "Run" image by myself through my website? I’d like to put on my website a kind of "Puzzle", a Mystery. I will want to put a link in the Image. It has to be a little quick to click.

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

javascript html image script link
  • 1

    Twitter Birdie who flies the Blog?! Huh? Are you referring to a specific blog? If yes, put a link there to make it clearer what you’re trying to explain.

  • 1

    Welcome to Stack Overflow English, do the [Tour] and see [Ask]. Your question is very broad, please add more details.

  • 1

    You can create animations using the function Animate() from jQuery

  • No. It’s a famous bird that flies through the blog that many use. Fernando already answered my question, and I got it. Thanks for the interest :)

1 answer

7


Look at this adapted example that (now already with the twitter bird)(Commented, on the points of possible changes):

$(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>

Example also in jsFiddle.

Source: This response from Soen.

  • Thanks! Solved My Problem.

Browser other questions tagged javascript html image script link

You are not signed in. Login or sign up in order to post.