Rain effect javascript code?

Go down

In progress Rain effect javascript code?

Post by Bluestarrox97 on July 22nd 2014, 8:26 pm

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.
avatar
Bluestarrox97
Forumember

Female Posts : 40
Reputation : 1
Language : English

http://www.warriorcatsworld.forumotion.com

Back to top Go down

In progress Re: Rain effect javascript code?

Post by Derri on July 22nd 2014, 8:30 pm

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

Male Posts : 8712
Reputation : 628
Language : English & Basic French
Location : Scotland, United Kingdom

Back to top Go down

In progress Re: Rain effect javascript code?

Post by Bluestarrox97 on July 22nd 2014, 11:19 pm

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

Female Posts : 40
Reputation : 1
Language : English

http://www.warriorcatsworld.forumotion.com

Back to top Go down

In progress Re: Rain effect javascript code?

Post by KinzPost on July 25th 2014, 12:03 am

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
avatar
KinzPost
Forumember

Posts : 26
Reputation : 2
Language : English

http://entertheforest.forumotion.com/

Back to top Go down

Back to top


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