Question

I am trying to create an interactive page where there’s a ball. When I click on it, 2-3 random balls appear on the page. Each of those, when clicked, produce 2-3 of their own and the page slowly fills up with such balls. I have done this part using Jquery.

Now the page has a background image that is hidden from the user, and all he sees is ‘white’. As and when a new ball appears, a circular region behind it (region being twice in size to that of ball) becomes transparent to reveal that portion of the background image, kind of like how the map is revealed in Age of Empires based on where the player goes.

How can I achieve this selective-revealing of background image based on the position of newly-created divs ? Can it even be done using just jquery/css and NO flash ?

My Jquery code for creating new balls looks like this :

$(document).on("click",".ball_link", function makeDiv(){
count=0;
//ajax code to fetch no. of divs to be created from table

    while(count< no_of_divs)
    {

    //code to calculate random x,y coordinates and save them to posx and posy

    var newdivid='div'+count;
    $newdiv = $('<div/>').css({
    'position':'absolute',
    'left':posx+'px',
    'top':posy+'px',
    'display':'none',
    'background':'ball.png'
    }).appendTo( '.page-wrap' ).delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300);
    count++;
    }
});

Answer 1

You can use CSS background-clip, background-position and border-radius. Your newly created divs should be bigger than ‘ball.png’ with some border-radius so they appear as circles.

Then you can set the background position to be equal to negative div’s position:
if div is on left: 100px; top: 40px then background-position should be: -100px -40px

Working sample here: http://jsfiddle.net/bndcS/

EDIT

Please see the fiddle here: http://jsfiddle.net/UX3B6/ The ‘balls’ appear with effect and delay.
Only one line of CSS had to be added 🙂

EDIT 2

As for background and its negative coordinates: imagine that you have a big div with a nice image in the background. Now you create a small div on top of the big one. You set it in the top left corner (0,0) and set the background to the same image of the big div. Images match perfectly. Now you want to move your small div a little bit (lets say 20px right, 20 px down). Now the images do not match – in order to make things working again you need to move background image of the small div in the opposite direction you moved the div itself, hence negative coordinates: (20px left, 20px up = -20px)