CODEWITHSUNDEEP
javascriptjqueryanimation
user1910388
user1910388

Reputation: 235

Moving multiple div's randomly around a page jQuery JS

I found this post really very helpful and it is almost what I want to achieve

The problem is I want multiple div moving around a page, how can this be modified to allow for multiple elements moving randomly?

$(document).ready(function(){
animateDiv();

});

function makeNewPosition(){

// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh,nw];    

}

function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.a').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);

$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
  animateDiv();        
});

};

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;

var speedModifier = .8;

var speed = Math.ceil(greatest/speedModifier);

return speed;

}

In this codepen I've made a new function targeting a new class but its drawing out the same movement.

http://codepen.io/Alex/pen/OPPBmX

Upvotes: 1

Views: 5761

Answers (4)

Rama Kathare
Rama Kathare

Reputation: 930

Please look into this JSFiddle. Updated

<div class='a' name="animate"></div>
<div class='b' name="animate"></div>

$(document).ready(function(){
    $("div[name=animate]").each(function(){
        animateDiv($(this));
    });
});


function animateDiv(c){
    var newq = makeNewPosition();
    $(c).animate({ top: newq[0], left: newq[1] }, function(){
      animateDiv(c);        
    });

};

css

div.a, div.b {
     width: 50px;
     height:50px;
      background-color:red;
     position:fixed;

    }
    div.b{
        background-color:green;
    }

This is just an Idea to start with.

UPDATE

In this following updated JSFiddle I have created three Div. So this is the best way to add any number of divs. All that you have to do is add css. Infact we can randomize that too.

Upvotes: 1

vp_arth
vp_arth

Reputation: 14992

Your wrong:

You animate ".a" in your animateDivTwo function, seems like you want target ".b" here
You call animateDiv in animateDivTwo function

So, animateDivTwo calls once only

I correct your codepen

Upvotes: 1

David
David

Reputation: 31

I made some modifications on your code pen page and came up with an solution I believe:

I made all the divs the same class.

http://codepen.io/anon/pen/NPPOXg

$(document).ready(function(){
    animateDiv();
    animateDivTwo();

});

function makeNewPosition(){

    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];    

}

function animateDiv(element){
    var newq = makeNewPosition();
    var oldq = $('.a').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $(element).animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv(element);        
    });

};

function animateDivTwo(){
    var newq = makeNewPosition();
    var oldq = $('.a').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv(this);        
    });

};

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;

    var speedModifier = .4;

    var speed = Math.ceil(greatest/speedModifier);

    return speed;

}

Upvotes: 1

Stryner
Stryner

Reputation: 7318

One possibility is to contain the functionality within a function, and call that function multiple times.

You can have a containing div which all divs will be appended to:

<div class="animatedDivs"></div>

Then inside the function you can create a div, append it to that div, and animate it:

function newDiv() {
    //Create
    var $div = $("<div class='a'>");

    //Append
    $(".animatedDivs").append($div);

    //Animate
    animateDiv();    

    function animateDiv(){
        //same code with $('.a') replaced by $div
    };

}

function makeNewPosition(){
    //same code
}

function calcSpeed(prev, next) {
    //same code
}

Then you can create as many as you want:

$(document).ready(function () {
    newDiv();
    newDiv();
    //etc...
});

Fiddle Example: http://jsfiddle.net/9agtb339/1/

Upvotes: 1

Related Questions