I would have different approaches depending on that, One way would be to create a transparent png image and position it on top of your div, another way is using css3 trasparent gradients and ::before or ::after pseudo selectors to place them..
If you're looking for Modern Browser support, CSS3 can come to your rescue. You can skew a div so that it appears as parallelogram and give opacity accordingly. If you dont want to write too many lines of code animating the 'keyframes' in CSS3, you can do that through jquery(positioning it from left to right) by parsing through all the divs. You'll can to use jQuery animate function.
I need to torch or light ray effect on an image/div on my webpage without the use of Flash.
This is something similar to the light path effect on the main banner on this site:
http://online.fullsail.edu/degrees/media-communications-bachelors?mnc=2602
Please advise.
What about compatibility? ie8? ie7?
I would have different approaches depending on that, One way would be to create a transparent png image and position it on top of your div, another way is using css3 trasparent gradients and ::before or ::after pseudo selectors to place them..
Thanks, I am looking for any modern browser (FF, Chrome) supported feature.
Almost impossible to do with a reasonable amount of mark-up &/or CSS if you are looking for some sort of animation effect.
That's why they use Flash.
Oh.. I thought we can have some 2-3 div/image solution. Like here is an example: http://jsfiddle.net/jV7gL/
Now, here the effect is like a scanner line.. I need something like a random ray of lights.
If you're looking for Modern Browser support, CSS3 can come to your rescue. You can skew a div so that it appears as parallelogram and give opacity accordingly. If you dont want to write too many lines of code animating the 'keyframes' in CSS3, you can do that through jquery(positioning it from left to right) by parsing through all the divs. You'll can to use jQuery animate function.
this is the best I could do with css3. http://jsfiddle.net/VvyUx/1/
I think the best solution would be to create transparent png images for the light rays
sty, this: http://jsfiddle.net/VvyUx/2/
You are awesome JoniGiuro ! This is exactly what I needed. Thanks a lot !!
How can I mark a discussion answered ?
You're welcome! keep in mind that this won't work on old browsers
Yes, I see that. I am only worried about "special effects" on latest browsers.