1

Como fazer um elemento movimentar-se pela tela de maneira aleatória quicando nas bordas da tela. Tipo aqueles protetores de tela de aparelhos DVDs antigos?!?

O exemplo mais próximo que achei a minha pergunta foi em css (keyframes, transforms, animations,etc...) más torna o código muito extenso pois precisava adicionar "alguns" elementos a mais. Exemplo.

Se alguém tiver solução equivalente (e menor) em jquery agradeço desde já.

5
  • Igual a este? Commented 3/09/2014 às 4:30
  • Já tinha visto este. Más não, o que procuro flutua pela tela "ricocheteando" quando bate nas bordas da tela. Commented 3/09/2014 às 4:35
  • Grato pela atenção amigo más, o que procuro o elemento parte em uma trajetória, bate no canto da tela (laterais) e recocheteia seguindo nova trajetória. Sem ter caminho prédetermiado. "Quicando pela tela" tens alguma idéia? PS: não achei nada parecido. Commented 3/09/2014 às 4:45
  • Há uma discussão similar resolvida no "stackoverflow.com". segue o link: stackoverflow.com/questions/13774659/… Commented 3/09/2014 às 4:47
  • Não, este é o mesmo exemplo que o @Papa Charlie passou. O que procuro segue um caminho em linha reta, bate no canto da tela (laterais) e recocheteia seguindo nova trajetória. Sem ter caminho prédetermiado. Commented 3/09/2014 às 5:13

1 Resposta 1

1

Fiz um exemplo no jsfiddle adaptado como base esta resposta.

JAVASCRIPT

$(document).ready(function()
{
    $('.bouncer').click( function(){
        alert('clicaram no: ' + $(this).attr('title'));
    });
});

$(function() {
    var minSpeed = .02;
    var maxSpeed = .06;
    var varSpeed = .005;

    function startBounce(element) {
        var container = element.parent();
        var width = container.innerWidth() - element.outerWidth();
        var height = container.innerHeight() - element.outerHeight();

        var vertSpeed = ((Math.random() * (maxSpeed - minSpeed)) + minSpeed);
        var horzSpeed = ((Math.random() * (maxSpeed - minSpeed)) + minSpeed);
        bounce(element, vertSpeed, height, 'top');
        bounce(element, horzSpeed, width, 'left');
    }

    function bounce(element, speed, max, dir) {
        speed += ((Math.random() * varSpeed) - (varSpeed / 2));
        speed = speed < minSpeed ? minSpeed : (speed > maxSpeed ? maxSpeed : speed)
        var time = max / speed;
        var position = element.position();
        if (position[dir] < 2) {
            target = max;
        } else {
            target = 0;
        }

        var style = {
            queue: false
        };
        style[dir] = target;
        element.animate(style, {
            duration: time,
            queue: false,
            easing: "linear",
            complete: function() {
                bounce(element, time, max, dir);
            }
        });
    }

    startBounce($('#bouncer1'));
    startBounce($('#bouncer2'));
});

CSS

#container{position:absolute; width:300px; height:200px}
.bouncer{position:absolute; width:20px; height:20px;}

HTML

<div id="container">
    <div class="bouncer" id="bouncer1" title="bouncer 1">•</div>
    <div class="bouncer" id="bouncer2" title="bouncer 2">•</div>
</div>

Estou mantendo o código fonte aqui como garantia, pois q questão original no SOEN foi dada como duplicata de uma questão que já foi removida.

6
  • Grato! Esta mais fluído do que o exemplo que tinha achado...não abusando de sua paciência. Como poderia inserir mais "bouncers" e com pontos de partida diferentes? No css seu que tem como reaproveitar o código agrupando classes (ids) más e no jquery? Commented 3/09/2014 às 6:56
  • Não sei qual aplicação que vai fazer mas se você colocar startBounce($('#bouncer')); startBounce($('#bouncer2')); nai ter 2 bouncer rodando aleatórios. Commented 3/09/2014 às 7:01
  • A aplicação seriam alguns "bouncers" (4 ou 5) tentarei usar valores "clicaveis" neles...por isso pus o <a> no exemplo. Commented 3/09/2014 às 7:06
  • Atualizei a resposta 2 bouncer's e evento click em cada um, incremente conforme sua necessidade. Commented 3/09/2014 às 7:15
  • Sem palavras. Grato pela atenção e pela grande ajuda! Commented 3/09/2014 às 7:24

Você deve fazer log-in para responder a esta pergunta.

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