The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Rain effect javascript code?

3 posters

Go down

In progress Rain effect javascript code?

Post by Bluestarrox97 Tue Jul 22 2014, 21:26

I'm trying to make it rain  on http://www.warriorcatsworld.net/forum , but I can't get whatever code I have been trying to use to work. Last night I managed to make it snow by using a code that was posted here as a Christmas/New Year's decoration, but rain won't work.
Bluestarrox97
Bluestarrox97
Forumember

Female Posts : 40
Reputation : 1
Language : English

View user profile http://www.warriorcatsworld.forumotion.com

Back to top Go down

In progress Re: Rain effect javascript code?

Post by Derri Tue Jul 22 2014, 21:30

Do you have an image for the rain? If so could you post it.
Derri
Derri
Helper
Helper

Male Posts : 8748
Reputation : 637
Language : English & Basic French
Location : Scotland, United Kingdom

View user profile

Back to top Go down

In progress Re: Rain effect javascript code?

Post by Bluestarrox97 Wed Jul 23 2014, 00:19

I don't have a picture for the rain. Is that needed for the code?
Bluestarrox97
Bluestarrox97
Forumember

Female Posts : 40
Reputation : 1
Language : English

View user profile http://www.warriorcatsworld.forumotion.com

Back to top Go down

In progress Re: Rain effect javascript code?

Post by KinzPost Fri Jul 25 2014, 01:03

Here's a pretty simple code

You can change how frequent the raindrops are, how fast they fall, and how many of them are on the screen at the time

Since you don't have a preferred image, I just used Google to find one.

Code:
<script type="text/javascript">
    var speed=20;
    var flakes=20;
    var flake_image="http://i57.tinypic.com/j99a3n.png";
    var swide, shigh;
    var dx=new Array();
    var xp=new Array();
    var yp=new Array();
    var am=new Array();
    var sty=new Array();
    window.onload=function() { if (document.getElementById) {
    var k, f, b;
    b=document.createElement("div");
    b.style.position="absolute";
    b.setAttribute("id", "bod");
    document.body.appendChild(b);
    set_scroll();
    set_width();
    for (var i=0; i<flakes; i++) {
    dx[i]=0;
    am[i]=Math.random()*20;
    xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);
    yp[i]=Math.random()*shigh;
    sty[i]=0.75+1.25*Math.random();
    f=document.createElement("div");
    f.style.position="absolute";
    f.setAttribute("id", "flk"+i);
    f.style.zIndex=i;
    f.style.top=yp[i]+"px";
    f.style.left=xp[i]+"px";
    k=document.createElement("img");
    k.src=flake_image;
    f.appendChild(k);
    b.appendChild(f);
    }
    setInterval("winter_snow()", speed);
    }}
    window.onresize=set_width;
    function set_width() {
    if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    else {
    swide=800;
    shigh=600
    }
    }
    window.onscroll=set_scroll;
    function set_scroll() {
    var sleft, sdown;
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    document.getElementById("bod").style.top=sdown+"px";
    document.getElementById("bod").style.left=sleft+"px";
    }
    function winter_snow() {
    for (var i=0; i<flakes; i++) {
    yp[i]+=sty[i];
    if (yp[i]>shigh-30) {
    xp[i]=am[i]+Math.random()*(swide-2*am[i]-25);
    yp[i]=0;
    sty[i]=0.75+1.25*Math.random();
    }
    dx[i]+=0.02+Math.random()/10;
    document.getElementById("flk"+i).style.top=yp[i]+"px";
    document.getElementById("flk"+i).style.left=(xp[i]+am[i]*Math.sin(dx[i]))+"px";
    }
    }
    </script>

I got this from the Winter theme codes here on Forumotion, and don't own the code
KinzPost
KinzPost
Forumember

Posts : 26
Reputation : 2
Language : English

View user profile http://entertheforest.forumotion.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum