Geek Answers Handbook

How to add multiple bouncing divs with different starting points using jQuery

This is what I have so far:

var vx = 3; var vy = 2; function hitLR(el, bounding) { if (el.offsetLeft <= 0 && vx < 0) { console.log('LEFT'); vx = -1 * vx; } if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) { console.log('RIGHT'); vx = -1 * vx; } if (el.offsetTop <= 0 && vy < 0) { console.log('TOP'); vy = -1 * vy; } if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) { console.log('BOTTOM'); vy = -1 * vy; } } function mover(el, bounding) { hitLR(el, bounding); el.style.left = el.offsetLeft + vx + 'px'; el.style.top = el.offsetTop + vy + 'px'; setTimeout(function() { mover(el, bounding); }, 50); } setTimeout(function() { mover($('.bouncer')[0], $('.bouncyHouse')[0]); }, 50);

https://jsfiddle.net/86xyxvyn/

I am trying to add several sections to this sketch so that each one bounces around the black box independently. Ideally, each word also has a unique starting position (not only in the upper left corner).

+5
source share
1 answer

With a few modifications you can get the desired result. One way to do this is to set the speed for each div using the data attribute. Then you apply the mover function to each div, using their individual speed and position to set a new speed and experience bouncing. Instead of using setTimeout, you can use setInterval. Like this:

 div class="bouncyHouse"> <!-- using data-vx and data-vy allows to set different speed for each div--!> <div class="bouncer" data-vx='2' data-vy='-3'> <span>space</span> </div> <div class="bouncer" data-vx='-2' data-vy='2'> <span>space</span> </div> <div class="bouncer" data-vx='5' data-vy='2'> <span>space</span> </div> </div>

js. This is almost what you had, except that I replaced each vx and vy with data related to each. And the call to move is made in the call to each() , which iterates through each bouncing div.

 function hitLR(el, bounding) { console.log($(el).data('vx'), $(el).data('vy')) if (el.offsetLeft <= 0 && $(el).data('vx') < 0) { console.log('LEFT'); $(el).data('vx', -1 * $(el).data('vx')) } if ((el.offsetLeft + el.offsetWidth) >= bounding.offsetWidth) { console.log('RIGHT'); $(el).data('vx', -1 * $(el).data('vx')); } if (el.offsetTop <= 0 && $(el).data('vy') < 0) { console.log('TOP'); $(el).data('vy', -1 * $(el).data('vy')); } if ((el.offsetTop + el.offsetHeight) >= bounding.offsetHeight) { console.log('BOTTOM'); $(el).data('vy', -1 * $(el).data('vy')); } } function mover(el, bounding) { hitLR(el, bounding); el.style.left = el.offsetLeft + $(el).data('vx') + 'px'; el.style.top = el.offsetTop + $(el).data('vy') + 'px'; } setInterval(function() { $('.bouncer').each(function(){ mover(this, $('.bouncyHouse')[0]); }); }, 50);

And you can immediately set the starting point in css.

 .bouncer { position: absolute; width: 200px; color:white; } .bouncer:nth-child(2) { top: 30px; left: 100px; } .bouncer:nth-child(3) { top: 50px; left: 200px; }

See the script: https://jsfiddle.net/qwLpf1vr/

+3
source

More articles:


All Articles