Add A Snow Flake Effect To Your Board

Guides & Snippets for phpBB3. Try the Snippets here and share Your own Snippets
There is no support here! Only Read Access!
Locked
User avatar
Post Bot
BBCoder II
BBCoder II
Posts: 44
Joined: 04 Mar 2010, 20:53

Add A Snow Flake Effect To Your Board

Post by Post Bot »

Add A Snow Flake Effect To Your Board
Written by Jaymie1989

This script adds a snow flake effect to your forum, Either to your Index page of to have it on every page of your forum the Overall_Header.html.

Features:
  • Able to change how many flakes show on the page at the same time.
  • Change how fast they come down.
  • Change the image of the flake that you want to use.
Credits:
Credits to DynamicDrive for this script

Instructions:
Use Across Your Forum:
Open - Styles > YOUR STYLE > templates > Overall_Header.html

For index page open this file:
Open - Styles > YOUR STYLE > templates > Index_Body.html

Find:

Code: Select all

</head>
Add Before:

Code: Select all

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
  
  //Configure below to change URL path to the snow image
  var snowsrc="./images/snow.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

	function iecompattest(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	}

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
		if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
		doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

	function hidesnow(){
		if (window.snowtimer) clearTimeout(snowtimer)
		for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
	}
		

if (ie4up||ns6up){
    snowIE_NS6();
		if (hidesnowtime>0)
		setTimeout("hidesnow()", hidesnowtime*1000)
		}

</script>
Save. Then in your ACP go to Styles > Templates > on your style REFRESH it and it should work.

At the top of that script you will see

Code: Select all

 // Configure below to change number of snow to render
  var no = 10;
You can change the 10 to how many flakes you want to show on your screen each time.

Place your snow flake in the images directory of your forum and here are 2 snow flakes you can use just make sure the image is called snow.gif and it will work. You can use your own flake but name the image as snow.gif for it to work.

To turn the flakes off when you dont want them but without removing the whole code just change the number '10' in the code to '0' like in the code below.

Code: Select all

// Configure below to change number of snow to render
  var no = 0;
Here are 2 snow flake images
snow.gif
snow.gif (256 Bytes) Viewed 5287 times
snow1.gif
snow1.gif (425 Bytes) Viewed 5287 times
BAT
BBCoder II
BBCoder II
Posts: 44
Joined: 03 Apr 2010, 19:25
Contact:

Re: Add A Snow Flake Effect To Your Board

Post by BAT »

Please help :

what would be the code , if I want to use multiple images at the same time
I am a Novice and I'm always confused . :?
cisco007
BBCoder VI
BBCoder VI
Posts: 1015
Joined: 16 Mar 2010, 18:14
Location: Don't really know!

Re: Add A Snow Flake Effect To Your Board

Post by cisco007 »

well i don't know if this will work, but try this... find this line

Code: Select all

  var snowsrc="./images/snow.gif"
and maybe add another line just like it below, just change the url and or just the gif name!
User avatar
ahh72
BBCoder II
BBCoder II
Posts: 19
Joined: 26 Apr 2010, 19:36
Location: Germany
Contact:

Re: Add A Snow Flake Effect To Your Board

Post by ahh72 »

hi, when seeking the code </head> in the file index_body.html not find it, any idea where i would have to put it?

regards
- Forum URL: http://www.gamerhispano.com/foro
- Hosting: http://www.bluehost.com
- PhpBB Version: 3.0.7-PL1
- Style: SE Square Left (based on prosilver)
User avatar
Stoker
Site Admin
Site Admin
Posts: 3536
Joined: 12 May 2008, 23:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark
Contact:

Re: Add A Snow Flake Effect To Your Board

Post by Stoker »

If you want it on index only, then insert this in overall_header.html before </head>

Code: Select all

<!-- IF SCRIPT_NAME == "index" -->
<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/
 
  //Configure below to change URL path to the snow image
  var snowsrc="./images/snow.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

   function iecompattest(){
   return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
   }

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;
 
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) { 
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
      if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
      doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

   function hidesnow(){
      if (window.snowtimer) clearTimeout(snowtimer)
      for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
   }
      

if (ie4up||ns6up){
    snowIE_NS6();
      if (hidesnowtime>0)
      setTimeout("hidesnow()", hidesnowtime*1000)
      }

</script>
<!-- ENDIF -->
Board rules! No PM support
User avatar
ahh72
BBCoder II
BBCoder II
Posts: 19
Joined: 26 Apr 2010, 19:36
Location: Germany
Contact:

Re: Add A Snow Flake Effect To Your Board

Post by ahh72 »

thanks Stoker :thumb:
- Forum URL: http://www.gamerhispano.com/foro
- Hosting: http://www.bluehost.com
- PhpBB Version: 3.0.7-PL1
- Style: SE Square Left (based on prosilver)
Locked