Random positioning of appearing divs on html page

Question

I'm trying to achieve something similar to this ( http://www.radimpesko.com/fonts/larish-alte ) where images (birds) appear at random on a html page, you've got to wait a moment before the "birds" start populating the page. Any idea on how to do this?

I've read that it might have to map the object on a grid. So any help is appreciated. Thanks.

Answer 1

Something like this might work

var Bird = function() {

    var image = "/image/to/bird.png";

    var position = {
        top : Math.floor(Math.random() * 100) + 1),
        left : Math.floor(Math.random() * 100) + 1)
    }

    var width = 20;

    var height = 20;


    var make = function() {   
       return '<div style="top:' + top + '%;left:' + left + '%;position:absolute;background-image:url(' + image + ');width:' + width + 'px;height:' + height + 'px;"></div>';
    }


    return make();
}


(function makeBird() {        
    setTimeout(function() {
        var bird = new Bird();
        $('body').append(bird);
        makeBird();
    }, 1000);
});

Warning : this is untested and you should probably account for collisions and handle them