0

I need to develop a section for website where I need to show a scanner kind of effect on the image selected.

It would be something similar to: http://blog.gabrieleromanato.com/2011/11/jquery-scanner-effect-on-a-slideshow/

What I need is a image in dark and a vertical light effect which goes from left to right on the image and I display the parts of the image below the light source. Once the light travels past any section, it turns dark again.

Please advise.

Pawan Pillai
  • 1,955
  • 5
  • 37
  • 64

1 Answers1

1

I see two choices, depending on the browser support you want, you could animate a CSS gradient in a div over your image, your gradient being something like

linear-gradient(to right, black x%, transparent (x+w)%, black)

x being the start of your lightning effect and w it's width (you animate on x). Of course you might use some little transparency on your black

You could as well use three divs over your image : one black of width x, one transparent of width w, and another black to the end, and animate the three divs.

  • Thanks @Champi Can you give me a fiddle for option 2: You could as well use three divs over your image : one black of width x, one transparent of width w, and another black to the end, and animate the three divs. – Pawan Pillai Oct 13 '12 at 18:06
  • @Pawan here is a simple fiddle : http://jsfiddle.net/jV7gL/ (only works on webkit now) it requires some updates though. I making the white bar shrink, but that's easy to fix. I'm using ccs transitions, but you could do it with full javascript if you want some older browser support. – Alexandre de Champeaux Oct 13 '12 at 18:42
  • @Pawan here is another fiddle using css3 gradients : http://jsfiddle.net/mp67B/ Same as the previous, omly works on webkit, but you just need to add the matching vendor prefix to make it work on other browsers. Unfortunately we cannot use css3 anim yet on gradients, but it works pretty smoothly on chrome anyway. Oh and if I answered your question already, please mark it so! Thanks! – Alexandre de Champeaux Oct 13 '12 at 19:02