Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
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.
61311 medalhas de ouro77 medalhas de prata1717 medalhas de bronze
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.
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>
Ao clicar em "Aceitar todos os cookies", você concorda que a Stack Exchange pode guardar cookies no seu dispositivo e utilizar essas informações de acordo com a nossa Política de Cookies.