1

I am trying to reveal a picture piece by piece. I found this thread here need ideas to only display some pixels and gray out the remaining pixels, with an excellent answer from mVChr. This is almost what I'm looking for, but I would like to make the revealing pieces larger, so it takes less time to completely see the image. What do I have to adapt in the code? Anybody able to help me? Thanks a lot for the effort

Community
  • 1
  • 1
user1456998
  • 11
  • 1

2 Answers2

4

You need to change two things.

First is the size of the grey boxes. That is done with this

htmlFrag += '<div id="'+id+'" class="pix" ' +
            'style="width:3px;height:3px;position:absolute;' +
            'left:'+j+'px;top:'+i+'px;"></div>';

Into something like this

htmlFrag += '<div id="'+id+'" class="pix" ' +
            'style="width:10px;height:10px;position:absolute;' +
            'left:'+j+'px;top:'+i+'px;"></div>';

Then you need to change the for loop that puts the boxes in to match

for (var i = 0, len = $('#i').height(); i < len; i += 3) {
    for (var j = 0, len = $('#i').width(); j < len; j += 3) {

Turns into

for (var i = 0, len = $('#i').height(); i < len; i += 10) {
    for (var j = 0, len = $('#i').width(); j < len; j += 10) {

Here's the example !

GregM
  • 2,634
  • 3
  • 22
  • 37
corsiKa
  • 81,495
  • 25
  • 153
  • 204
  • Beaten to the punch :) Made a small adaption to the original fiddle to put the size in a variable so you can test easily: http://jsfiddle.net/W7Xse/42/ (change the pixelsize var) – Me.Name Jun 14 '12 at 18:36
0

Here's a branch of corsiKa's fiddle with some mods, most significant of which is the way the pixels are removed, allowing a time period to be specified.

The need for the pixels to have ids is also avoided, therefore the HTML is simpler.

Beetroot-Beetroot
  • 18,022
  • 3
  • 37
  • 44