Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #40299
    pawanpillai
    Member

    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.

    #111872
    JoniGiuro
    Participant

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

    #111874
    pawanpillai
    Member

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

    #111901
    Paulie_D
    Member

    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.

    #111956
    pawanpillai
    Member

    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.

    #111963
    neerukool
    Participant

    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.

    #111976
    JoniGiuro
    Participant

    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

    #111977
    JoniGiuro
    Participant
    #112035
    pawanpillai
    Member

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

    #112037
    pawanpillai
    Member

    How can I mark a discussion answered ?

    #112039
    JoniGiuro
    Participant

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

    #112075
    pawanpillai
    Member

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.