Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 597
  • Last Modified:

javascript to unveil an image pixel by pixel

I need help with java script to unveil an image pixel by pixel for one of my project. When user click on the button, the image should start unveiling/revealing itself pixel by pixel (with random start point every time). For example when user click on the button first time the image unveil pixel by pixel from top right corner. The 2nd time user click on the button the image unveil pixel by pixel from bottom left corner etc… Can I do this in JavaScript and how?
0
Mike
Asked:
Mike
  • 4
  • 3
  • 3
3 Solutions
 
Michel PlungjanIT ExpertCommented:
How about this:

http://jqueryui.com/demos/show/

If you insist on plain JS, here is something
<style type="text/css">
#container { margin:0; padding:0; border:1px solid red; width:400px; height:400px; visibility:hidden; position:absolute; top:20px; left:20px }
#cover { margin:0; padding:0; border:1px solid yellow; width:400px; height:400px; z-index:50; position:absolute; top:20px; left:20px }
.hider { float:left;margin:0; padding:0; background-color:black; width:20px; height:20px; z-index:100}
.trans { float:left;margin:0; padding:0; background-color:transparent; width:20px; height:20px; z-index:100}
</style>
<script type="text/javascript">
window.onload=function() {
  var cover = document.getElementById("cover");
  for (var i=20*20, c;i>0;i--) {
    c = document.createElement("span");
    c.className="hider";
    cover.appendChild(c);
  }  
  document.getElementById("container").style.visibility="visible"  
  var spans = cover.getElementsByTagName("span");
  var rnd;  
  var cnt = spans.length;
  var tId = setInterval(function() {
    rnd = Math.floor(Math.random()*spans.length);
    if (spans[rnd].className=="hider") {
      spans[rnd].className="trans";
      cnt--
      if (cnt==0) clearInterval(tId)      
    } 
  },50)
       
}
</script>
<div id="container">
<img src="http://4.bp.blogspot.com/_kWnD1qfyTls/TJKQPXMa0dI/AAAAAAAAFxY/cP3f_RaZrzo/s640/REM+Reveal+Cover.jpg" />
</div>
<div id="cover">

</div>

Open in new window

0
 
MikeAnalystAuthor Commented:
Thanks mplungjan. This is close to what I need. How do I edit the random function to be consistant.
- For example, how do I modify the rnd to always start reveling from bottom right corner?

I know I requested for randomnus before but I also want to keep track of the randomess... Basically I want to have 4 to 5 (differnt) reveling effects but they must be consistant.  for example Everytime, I choose the 1st revealing effect, it should reveal (start and end) the same way as it did before.
0
 
Michel PlungjanIT ExpertCommented:
I'll look tomorrow
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
RobOwner (Aidellio)Commented:
not sure if this might help as I also started on this question yesterday

http://jsfiddle.net/rjurd/gwn38/
0
 
Michel PlungjanIT ExpertCommented:
But that looks like you are done?!
0
 
RobOwner (Aidellio)Commented:
ok so that's how you interpreted the question as well... wasn't sure exactly re "pixel by pixel"
0
 
MikeAnalystAuthor Commented:
Thanks mplungjan & tagit. Both of your answers getting me near to my solution.

One more help with the fadein() time for tagit's code. I tried fadeIn("slow") but stil the same response time. I want it to reveal or fadein the image much more slower.
0
 
RobOwner (Aidellio)Commented:
it's set up for 1 sec (1000 millisec).  I've added a variable below "fadein_delay" and set it to 1000 or 1 second.  If you want longer, change this to say 5000 for 5 seconds etc

    $('#btnReveal').click(function() {
        var fadein_delay = 1000; // 1 sec
        var curVert = vert[Math.round(Math.random())];
        var curHori = hori[Math.round(Math.random())];
        $('#myvals').html('vertical: ' + curVert + ' horizontal: ' +curHori);
        $('#myimage').effect('scale', {
            origin: [curVert, curHori],
            percent: 0
        }, fadein_delay, function() { reset(); });
    });

Open in new window

0
 
RobOwner (Aidellio)Commented:
Did you know what I meant by changing the fadein delay variable?
0
 
MikeAnalystAuthor Commented:
Thanks Tagit. I changed the fade in delay to 100K and it looks good to me. I think I am set!

I am going to keep this question open for couple more days in case if I get any questions.  

Thank you both Tagit & mplungjan!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now