The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Rain effect javascript code?

View previous topic View next topic 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 onhttp://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
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.


Forum Rules: :Forumotion Staff: :Appeal A Warning: :FAQ: :Tips & Tricks: :Forgotten Password/Login Issues
You need one post to send a PM
When your topic has been solved, ensure you mark the topic solved
Never post your email in public


Derri
Administrator
Administrator

Male Posts : 8355
Reputation : 571
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?

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

KinzPost
Forumember

Posts : 26
Reputation : 2
Language : English

http://entertheforest.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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