SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rain Effect With Javascript?

    Hello

    I am just starting to get into Javascript and working my way through Sitepoints Simply Javascript book.

    There is a javascript effect I would like to use on a webpage I am making, it is to give the impression of rain, much like the DS Rain script

    http://www.dseffects.com/scriptsfx/DS_Rain/DS_Rain.html

    However that gives the effect to the whole page, I need it applied to just one of my divs so it looks like it's raining on a character I have inside that div

    Would this be hard to accomplish? Is it worth trying to build my own script or would I be better off using a pre built one as it is a complex task?

  2. #2
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The simplest way would perhaps be to not use JavaScript at all, but rather use an animated GIF as a background image on the DIV. Those kinds of effects in JavaScript usually require absolute positioning of the DIVs. Absolute positions are with respect to the upper left corner of the entire page.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't think of that, but wouldn't there be a stutter delay with the gif while it loads?

  4. #4
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fujiprovince View Post
    I didn't think of that, but wouldn't there be a stutter delay with the gif while it loads?
    Make a small non-interlaced GIF that tiles seamlessly rather than a large one.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I hadn't made an animated GIF before. I found this tutorial (http://www.planetphotoshop.com/animated-rain.html) which is basically similar to the effect I wanted to achieve however there were 2 problems that I ran into

    1) The rain gif isn't transparent, it shows a black border

    2) The file size of the completed GIF was massive, nearly 6MB


    Not sure where I am going wrong as not done this before?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •