1
How to make an element move around the screen randomly by bouncing at the edges of the screen. Like those old DVD screen savers?!?
The closest example I found my question was in css (keyframes, Transforms, animations, etc...) but it makes the code very extensive because it needed to add "some" more elements. Example.
If someone has equivalent (and smaller) solution in jquery thank you already.
1
I made an example at jsfiddle adapted as a basis this answer.
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>
I am keeping the source code here as a guarantee, because the original issue in SOEN was given as a duplicate of an issue that has already been removed.
Thankful! This more fluid than the example he had found...not abusing his patience. How could I insert more "bouncers" and with different starting points? In your css you can reuse code by grouping bad classes (ids) and in jquery?
I don’t know what application you’ll do but if you put startBounce($('#bouncer')); startBounce($('#bouncer2')); Have 2 Ouncer running randomly.
The application would be some "bouncers" (4 or 5) I will try to use "clickable" values on them...so I put the <a> in the example.
I updated the answer 2 Bouncer’s and event click on each, increment as your need.
No words. Grateful for your attention and great help!
Arrange. It was an adapted example; you can rewrite this code better later.
Browser other questions tagged jquery html css
You are not signed in. Login or sign up in order to post.
Like this?
– Papa Charlie
Had already seen this. But no, what I look for floats by the screen "ricocheting" when it hits the edges of the screen.
– Lauro Moraes
Grateful for the attention friend bad, what I look for the element leaves in a trajectory, hits the corner of the screen (lateral) and recocheteia following new trajectory. Without having a previous path. "Bouncing around the screen" do you have any idea? PS: I didn’t find anything similar.
– Lauro Moraes
There is a similar discussion resolved in "stackoverflow.com". follow the link: http://stackoverflow.com/questions/13774659/random-movement-in-a-fixed-container
– Everson Moura
No, this is the same example @Papa Charlie gave. What I look for follows a straight path, hits the corner of the screen (lateral) and recocheteia following new trajectory. Without having pre eternal path.
– Lauro Moraes