php - need ideas to only display some pixels and gray out the remaining pixels -
i'm looking ideas ...brainstorming new project client ....i have image ...300px x 300px ...i need display image 1 random pixel @ time until entire image revealed.
basically, @ intervals, pixel revealed , remains revealed while other pixels still blank. @ each interval, pixel @ random revealed , remains revealed join other revealed pixels. eventually, pixels revealed.
any suggestions on how make happen?
i make numerous copies of image , manually reveal 1 random pixel, surely can done programatically :)
oh, , cannot form of flash.
edit: realize mis-interpreted needed do, thought cool anyway , applied problem...
see working demo of following →
i threw in jquery. made each pixel 3x3 box instead because otherwise take way long process. seems work pretty on in client side, though haven't tested ie yet.
<div id="w"> <img id="i" src="yourimage.jpg" width="300" height="300" /> </div> $('#w').css({ width: $('#i').width(), height: $('#i').height() }); var htmlfrag = '', id, ids = [], removepix = function () { if (ids.length) { var rand = math.floor(math.random()*ids.length); $('#'+ids[rand]).fadeout(function(){ $(this).remove(); }); ids = ids.slice(0, rand).concat(ids.slice(rand+1)); settimeout(removepix, 1); } }; (var = 0, len = $('#i').height(); < len; += 3) { (var j = 0, len = $('#i').width(); j < len; j += 3) { id = 'pix'+j+'-'+i; ids.push(id); htmlfrag += '<div id="'+id+'" class="pix" ' + 'style="width:3px;height:3px;position:absolute;' + 'left:'+j+'px;top:'+i+'px;"></div>'; } } $('#w').html($('#w').html() + htmlfrag); removepix();
Comments
Post a Comment