Grow your CSS skills. Land your dream job.

How to get a torch or light ray effect using CSS or JavaScript or jQuery

  • # October 15, 2012 at 8:50 am

    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.

    # October 15, 2012 at 9:06 am

    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..

    # October 15, 2012 at 9:10 am

    Thanks, I am looking for any modern browser (FF, Chrome) supported feature.

    # October 15, 2012 at 11:08 am

    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.

    # October 15, 2012 at 10:46 pm

    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.

    # October 16, 2012 at 12:29 am

    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.

    # October 16, 2012 at 9:08 am

    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

    # October 16, 2012 at 9:10 am

    sty, this: http://jsfiddle.net/VvyUx/2/

    # October 17, 2012 at 1:15 am

    You are awesome JoniGiuro ! This is exactly what I needed. Thanks a lot !!

    # October 17, 2012 at 1:16 am

    How can I mark a discussion answered ?

    # October 17, 2012 at 3:41 am

    You’re welcome! keep in mind that this won’t work on old browsers

    # October 17, 2012 at 9:56 am

    Yes, I see that. I am only worried about “special effects” on latest browsers.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".