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.
Look at this tailored example this (now with the twitter bird) (Reviewed, in 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><!--Paraindicarumlinkuseataga,eadicioneolinknoatributohref--><ahref="https://www.google.com" class='birdFloat'></a>Source: This answer from SOen .